移动端打印调试插件 - debug.js 介绍
前文中我们学习过，用 Fiddler 作为代理可以在移动端打开本地的页面进行查看（ 如何用 fiddler 代理调试本地手机页面 ），但是对于 js 的调试却无能为力（需要借助其他调试手段，比如UC浏览器开发者版），只能通过 alert 输出一些东西。
alert 的手段在一些简单的调试中还是蛮有效的，但是 alert 会将 js 线程挂起，而且会自动调用输出对象的 toString() 方法，这样有些对象的 alert 就会是 "[object Object]" 的字样。我们想如果能用 console 方法该有多好啊！ debug.js 就能简单实现这个美好的愿望。
debug.js 会将调试信息显示在网页上，其实原理也十分简单，就是动态创建 DOM 元素，然后 append 到页面上。
使用方法很简单，先在页面上引入 debug.js，然后就能用它的 debug.log API，跟 console.log 的用法一样一样的。
<iframe src='http://www.cnblogs.com' style='width:100%; height:100%'> </iframe> <script src="debug.min.js"></script> <script> var a = {name: 'hanzichi', age: 10}; debug.log(a); var b = [1, 2, 3]; debug.log(b); </script> 
触碰下调试信息，它就会隐藏掉。
debug.js 还提供了其他 API，可以有不同的背景色（跟 console 类似）。
debug.log() debug.success() debug.warn() debug.error() debug.danger() debug.js 还有另外一个功能，捕捉浏览器的报错，个人觉得有点鸡肋，本地试了好几次都不能正确定位到最原始的错误行。默认引入 debug.js 即开启这项服务，可以用 debug.guai() 关掉它。
需要注意的是，debug.js 作为轻量级的调试打印工具，无法正确打印嵌套的对象，比如：
var a = { b: { name: 'hanzichi', age: 10 } }; debug.log(a); 这时就会打印 {b: [object Object]}
正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
