js调试

调试技术，在任何一项技术开发中都是一项必不可少的技能。掌握各种调试技巧，必定能在生活中起到事半功倍的效果。本文就简单讲解一下前端js调试技巧，也许你已经很熟悉，那就让我们一起来温习一下。

骨灰级调试大师Alert

在互联网刚刚起步时候，网页前端主要是以内容展示为主，浏览器脚本还只能为页面提供非常简单的辅助功能，js调试功能也非常弱，只能通过内置Window对象的alert方法来调试，虽然alert方法很原始，但是当时它确实有不可磨灭的作用。

新一代调试王者console

随着js在前端能做的事越来越多，地位越来越重要，传统alert方式渐渐不能满足前端开发的种种场景。而且alert弹出窗口方式着实不美观，而且还会阻碍页面渲染，开发人员调试完毕后，需要手动清除调试代码，实在有些麻烦。

所以新一代浏览器Firefox、Chrome，还有IE，都相继推出了js调试控制台，支持"console.log(xxx)"形式打印调试信息，而不影响页面。以Chrome为首的浏览器，还为Console扩展了丰富的功能：例如：console.table()、console.error()等等；

JS断点调试

断点，调试器的功能之一，可以让程序中断在需要的地方，从而方便其分析。

sources调试

添加断点流程：“打开开发者工具”——“点击sources菜单”——“左侧数中找到对应文件”——“点击行号”就完成在当前行添加/删除断点。

当成功添加断点后，刷新页面js执行到断点处停止，在sources界面中会看到当前作用域中所有变量和值，只需要对每个值进行验证即可，但是这个功能是较新浏览器才有的功能，如果你的浏览器是较老版本，可以使用鼠标在变量名上短暂停顿就会出现变量值，或者在断点情况下，切换到console面板，直接在控制台输入变量名，回车查看变量值。

sources面板中各个图标功能（鼠标放上会有名称显示）：

Pause/Resume script execution :暂停/恢复脚本执行；

Step over next function call:执行到下一步的函数调用；

Step into next function call:进入当前函数；

Step out of current function:跳出当前执行函数；

Deactive/Active all breakpoints:关闭/开启所有断点；

Pause on exception:异常情况自动断点设置。

Debugger

Debugger是直接在代码中添加“debugger;”语句，代码执行到该语句时就会自动断点，接着操作和sources操作一样，只是需要手动删除该语句。

该种方式存在意义，我想应该是这样的：我们在开发中偶尔会遇到异步加载html片段（包含内嵌js）情况，这部分js在sources树中无法找到，因此无法直接使用sources，则“debugger;”就发挥作用了。

DOM断点调试

在DOM元素上添加断点，Element面板——右击DOM元素——Break on...(子节点修改、自身属性修改、自身结点被删除)，右侧DOM Breakpoints中会显示断点；

XHR断点调试

XHR Breakpoints是专为异步而生的断点调试工具，可以通过XHR Breakpoints右侧的“+”为异步断点添加断点条件，如果没有输入条件，就会监听所有xhr请求，一旦xhr调用触发就会在xhr.send（）处中断。不过这个功能在日常开发中使用不是很多，可能这类型断点在日常开发中本身涉及就不多，而且现阶段很多js开发都是基于框架的，极少有人自己封装ajax方法的。

Event Listener Breakpoints

事件监听器断点，当事件被触发时，断点到事件绑定位置。事件监听器断点，列出了各种可能的事件类型。

调试，在项目开发中起到非常重要的作用，能够帮助我们快速定位问题，节约开发时间。熟练各种调试技巧，对日常开发会起到很大作用。