JavaScript调试技巧
1 debugger
只要在代码中添加debugger，chrome在运行的时候会自动停在那里。还可以用条件语句把它包裹起来，这样就可以在需要的时候才执行它。
if (thisThing) {
debugger;
}
2 console功能
调试时console.log是最常用的命令之一，此外还有一些其他的使用的功能
2.1 console.log
在console.log()中，可以用%s设置字符串，%i设置数字，%c设置自定义样式，console.log()接受的两个参数，前者是描述性的语言，而第二个参数是与第一个参数位置对应的字符
console.log(' %c %s %s %s', 'color: yellow; background-color: black;', '–', '测试信息', '–');
2.2 console.table()
很多的时候，你可能会有一堆对象需要查看。可以用console.log把每一个对象都输出出来，也可以用console.table语句直接把所有的对象都直接输出成为一个表格
2.3 console.time()和console.timeEnd()
当想知道某些代码的执行时间的时候这个工具将会非常有用，特别是当你定位很耗时的循环的时候。
2.4 console.trace()
console.trace()会显示函数调用的完整的堆栈轨迹信息
getTopN2(arr, n) {
// sort参数返回值大于1，就交换位置
console.trace('getTopN2');
return [...arr].sort((a, b) => b - a).slice(0, n)
}
结果如下：
3 DOM节点变化时中断代码运行
在调试DOM节点时，可以在Chrome的Elements界面，右键点击某个元素，选择Break on选项，可以在子节点变化时中断、在元素属性变化时中断或者在节点被移除时中断代码运行
4在控制台设置断点
4.1 快捷键
-
F8: 跳转至下个断点 -
F10: step over, 单步执行, 不进入函数 -
F11: step into, 单步执行, 进入函数 -
shift + F11: step out, 跳出函数
4.2 在代码上设置断点
对于每个已添加的断点都有两种状态：**和禁用。刚添加的断点都是**状态，禁用状态就是保留断点但临时取消该断点功能。
在Breakpoints列表中每个断点前面都有一个复选框，取消选中就将禁用该断点。断点位置的右键菜单中也可以禁用断点。也可以在右侧功能区上面Chrome断点设置钮临时禁用所有已添加的断点，再点一下恢复原状态。
4.3 逐步执行
每点击一次，JS语句往后执行依据，F11
4.4 逐过程执行
和“逐语句执行”按钮不同，“逐过程执行”按钮常用在一个方法调用多个JS文件时，涉及到的JS代码比较长，则会使用到这个按钮。
在复杂的JS文件中，F11会进入到jQuery等工具库文件的内容，点击逐过程执行的按钮就可以跳过框架的JS脚本了
4.4 条件断点
在断点位置的右键菜单中选择“Edit Breakpoint…”可以设置触发断点的条件，就是写一个表达式，表达式为true时才触发断点。
5 调用栈（Call Stack）
在断点停下来时，右侧调试区的Call Stack会显示当前断点所处的方法调用栈，比如有一个函数g()其中又调用了函数f()，而我在f()中设置了一个断点，那么执行函数g()的时候会触发断点，其调用栈显示如下：
最上面是f()，然后是g()。调用栈中的每一层叫做一个frame，点击每个frame可以跳到该 frame 的调用点上。
此外，还可以在frame上用右键菜单重新开始执行当前frame，也就是从该frame的开始处执行。比如在函数f()的frame上Restart Frame， 断点就会跳到f()的开头重新执行，context中的变量值也会还原。
这样结合变量修改和编辑代码等功能，就可以在当前frame中反复进行调试，而不用刷新页面重新触发断点了。
6 查看变量
Call Stack列表的下方是Scope Variables列表，在这里可以查看此时局部变量和全局变量的值。
7 临时修改 JavaScript 代码
Chrome中可以临时修改JS文件中的内容，保存（Ctrl+S）就可以立即生效，结合Console等功能就可以立即重新调试了。但注意这个修改是临时的，刷新页面修改就没了。