欢迎访问WDPHP素材源码!今天是2024年03月29日 星期五,熬夜对身体不好,早点休息吧!
您好,游客 [ 马上登录 | 注册帐号 | 微信登录 | QQ登录]
当前位置:首页 > 教程 > 前端开发 > 

使用debug.js调试手机网页
栏目分类:前端开发    发布日期:2017-08-26    浏览次数:4496次     收藏

创作背景

手机网页兼容性与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还提供了其他几个实用的方法:

  1. debug.success()
  2. debug.warn()
  3. debug.error()
  4. debug.danger()

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

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

深入了解debug.js

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

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

色彩

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

相关热词: debug.js调试手机网页

源码 模板 特效 素材 资源 教程 站长