本文就想总结一些调试的方法，其实调试是提高效率的重要方法之一，会用正确高效的调试方法，可以事半功倍。

1、最常用console.log（简单数据输出）

  • 这就没有什么好解释的，不过输出也是有技巧的，那就是要格式化，简单说就是要有标志性，只有数据或许会让人不理解，最好是加上前缀
1
2
3
// example
console.log("fun's result---" + fun(2));
console.log("value of a---" + a);
  • 当然可以改变颜色和字体等

2、debugger：断点

  • 与console.log相比，debugger会在执行的过程中停在你想的地方，能够更加直接的看到执行过程。

3、将对象以表格的形式展示console.table()

  • 将对象强制用表格打出来，这样展开的对象键值对应更加清晰
  • 注意firefox有限制，最多显示1000行

4、尝试适配各种机型屏幕大小

  • 这个对开发手机页面很有帮助
  • 其次是可以检查布局问题

5、如何快速找到对应的DOM元素

  • 方法1浏览器的快速选择工具
  • 方法2是通过参数访问，浏览器有将DOM元素进行编号，可以通过$x的方式去访问。（具体后续补充）

6、使用console.time()和console.timeEnd()来记录时间

  • 关注函数运行的时间是提高效率的方法之一

获取某个函数的Stacktrace

  • console.trace()
  • 向Web控制台输出一个堆栈跟踪

将minify的代码还原

  • {}

快速定位需要debug的函数

  • debug(funName)
  • 会在执行函数的地方停下来

屏蔽不相关的脚本

  • 注释掉

查看某个函数调用和其参数

  • monitor(funName)

Postman很好用，不过传说Firefox更快

  • 但由于本人喜欢用chrome，所以没有用尝试firefox