Chrome的调试功能十分强大，这里仅简单记录一些常用的 JS 调试，日常所需必备。
1、设置断点
可以通过以下两种方式来设置断点：
（1）F12 调出控制台后，在 Source 面板设置。找到要调试的文件，在内容源代码左侧的代码标记行的位置点击，即可打上一个断点：
（2）在 js 文件中设置。在 js 源文件中需要执行断点操作的位置加上 debugger：
设置之后，刷新浏览器，页面代码运行到断点处便会暂停执行。
2、断点调试
（1）右侧调试区顶部是断点调试的几个功能按键，从左到右依次为：
* 运行到下一个断点（F8）
* 不进入函数，继续执行下一行代码（F10）
* 进入函数（F11）
* 从执行的函数中跳出（Shift+F11）
* 单步执行（F9）
* 是否禁用所有断点，不做任何调试
* 程序运行遇到异常时是否中断
（2）当程序运行到断点处停下来的时候，右侧调试区的 Call Stack 会显示当前断点的方法调用栈，从上到下由最新调用处依次往下排列（即断点处的方法调用层次关系）
（3）Call Stack 的下面是 Scope Variables 列表，可以查看此时局部变量和全局变量的值。此外，在调试的时候，把鼠标放在某个变量上，也可以查看该变量的运行值。
3、DOM 元素设置断点
除了可以给 js 代码设置断点，还可以给 DOM 元素设置断点来监听和查看某个元素的变化、赋值情况。
（1）在 Element 面板，右键点击需要监听的 DOM 节点，选择 "Break on..." 菜单项，再出现的三个选择项中选择一个便会添加断点。三个选项分别对应如下三种修改情况：
* subtree modifications : 子节点修改
* attribute modifications : 自身属性修改
* node removal : 自身节点被删除
（2）设置好断点后，当 DOM 元素要被修改时，代码就会自动停留在修改处。
4、统一管理所有断点
实际项目调试的时候，我们可能会在不同的文件、不同的位置添加许多断点，这些都会显示在 Source 页面的 Breakpoints、DOM Breakpoints 区域中，点击断点前面的复选框可以暂时 去掉或者添加 该断点，点击断点可跳转到相应的程序代码处。
最后，附上两篇有深度的：
/blog/cache/detail_1734.html
/KyleLi/p/7474114.html
