前文中我们学习过,用 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]}