移动端打印调试插件 - 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]}

---

read more：

• debug.js Github
• DEBUG.COFFEE