调试时开发项目中必不可少的一项技能,掌握好调试方法会让你的开发事半功倍,更有效率!
1、alert()
起初阶段,JavaScript的调试主要是alert(),目前仍然具有一定的地位
2、console
console会在控制台打印出调试信息,不直接影响页面的显示,经常使用的是console.log()、console.error()等
调试完后尽量把与业务逻辑无关的调试代码删除!!!
3、断点调试
类似于Java的断点调试,需要打开开发者工具,一般的浏览器是F12
(1)Sources菜单
在Sources菜单下,找到源文件,直接在文件的行号处添加断点
(2)debugger断点
在代码中添加debugger;语句,代码执行到该语句时自动断点,其他和Sources菜单操作一样
(3)DOM断点
通过开发者工具面板的Elements菜单,快速定位DOM节点,再通过DOM节点定位脚本
当节点内部子节点变化时断点(Break on subtree modifications)
当节点属性发生变化时断点(Break on attributes modifications)
当节点被移除时断点(Break on node removal)
(4)XHR断点
XHR断点调试正是为异步(Ajax,XMLHttpRequest)调试而产生的断点调试功能
通过"XHR Breakpoints"右侧的“+”给异步断点添加断点的条件,当异步请求的URL满足此条件时,自动产生断点
只对原生的Ajax起作用,对于封装好的Ajax没用,因此在实际开发中很少使用该方法调试
(5)事件监听器断点
根据事件名称进行断点设置,当事件被触发时,定位到事件绑定的位置
总结:调试方法在开发过程中的重要性不用多说,选择一种适合自己的调试方法对于开发至关重要,这需要不断尝试,不断积累经验
具体请参考文章:http://www.codeceo.com/article/javascript-debug-skills.html