使用debug.js调试手机网页

ernest.wang 发布于2019-08-21 12:32 / 425人阅读

摘要：会把调试信息显示在网页上，很方便的就能看到。的十分简洁简单，如果你没啥追求，就直接使用这么使用一个优雅的调试信息你就会在网页顶部看到一个优雅的调试信息。

创作背景

手机网页兼容性与ie相比，有过之无不及，调试的时候，我们会使用console.log，但是手机上看不到打印出来的信息。所以只好各种alert，但alert总显得不那么优雅。

初学js的时候就alert，现在还在各种alert。而且alert后还要点击确定，如果循环alert，那就悲剧了，一直点确定吧，可能手机还因此搞死机了。

那么有没有一种显得更加优雅的方式去输出调试信息呢？

有的。使用debug.js就好了。

貌似看到过一次，有人在iPhone上打开了控制台，如果有人知道，请告诉我。

debug.js会把调试信息显示在网页上，很方便的就能看到。原理也十分简单，动态创建dom元素，然后append到页面中。

先睹为快

你可以点这里看到使用debug.js的网页，想说它真的非常好看，你也可以用手机扫描二维码访问。

如何使用debug.js

引入debug.js后，你会得到debug这个方法，它是挂载在window下面的。

debug.js的api十分简洁简单，如果你没啥追求，就直接使用这么使用：

debug.log("一个优雅的调试信息");

你就会在网页顶部看到一个优雅的调试信息。

如果你不满足于此，你追求色彩，追求调试类型，那么debug.js还提供了其他几个实用的方法：

  
debug.success()
  debug.warn()
  debug.error()
  debug.danger()

意思就不用解释了，有了这些，输出的调试信息也缤纷了起来，似乎人生也变得colorful。

额，突然觉得说完了，就这么简单，讲述起来简单，理解和使用起来亦是如此。

深入了解debug.js

你可以在Github上关注或者Forkdebug.js。

如果你关心如何实现，可以点这里看到debug.js的源码实现。

色彩

我喜欢各种各样的色彩，我喜欢彩色的物品，住的地方有各种彩色的元素，比如沙发，比如床单，比如T恤上的涂鸦。我不太会统一所有的东西，比如我的储物柜是绿色的，那么我的垃圾桶可能就是黄色，我的热水壶可能就是红色。也因此设计了丰富多彩的debug.js。也许这算是某种怪癖吧，你呢？喜欢彩色么？

云服务器 GPU云服务器网页js代码调试工具使用xdebug调试php 手机网页手机网页js适配手机

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87650.html

React Native基础&入门教程：调试React Native应用的一小步

摘要：这也成为了一些开发者跨入移动开发大门的第一道小门槛。目前已经知道了调试设置中和。 React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快速地重...

NickZhou 2019-08-26 11:58 评论0 收藏0
【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果

摘要：今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧，主要是最近做个微信公共号网站。今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。、今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧，主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。页...

番茄西红柿 2019-04-23 13:23 评论0 收藏0
我推荐的一些前端开发工具

摘要：性能卓越的模板引擎简洁的模版语法，简单的，关键还能前后端共用模板，简直就是前端开发利器。是由阿里巴巴部门推出的矢量图标管理网站。是一个简单的设备检测工具。 artTemplate 性能卓越的 js 模板引擎简洁的模版语法，简单的API，关键还能前后端（Nodejs）共用模板，简直就是前端开发利器。今天有个想法，把artTemplate封装下，模版render后给input等注册几个事...

nodejh 2019-08-21 10:32 评论0 收藏0