在 Chrome DevTools 中调试 JavaScript 入门
如果您使用 console.log() 来查找和修正代码中的错误，可以考虑改用本教程介绍的工作流程。 其速度快得多，也更有效。
第 1 步：重现错误
重现错误始终是调试的第一步。“重现错误”是指找到一系列总是能导致错误出现的操作。
您可能需要多次重现错误，因此要尽量避免任何多余的步骤。
第 2 步：使用断点暂停代码
DevTools 让您可以暂停执行中的代码，并对暂停时刻的所有变量值进行检查。 用于暂停代码的工具称为断点。 立即试一试：
按 Command+Option+I (Mac) 或 Ctrl+Shift+I（Windows、Linux）在演示页面上打开 DevTools。
点击 Sources 标签。
点击 Event Listener Breakpoints 将该部分展开。DevTools 显示一个包含 Animation 和 Clipboard 等可展开事件类别的列表。
在 Mouse 事件类别旁，点击 Expand Expand 图标。
DevTools 显示一个包含 click 等 Mouse 事件的列表，事件旁有相应的复选框。 1. 选中 click 复选框。
返回至演示页面，再次点击 Add Number 1 and Number 2。DevTools 暂停演示并在 Sources 面板中突出显示一行代码。
当您选中 click 复选框时，就是在所有 click 事件上设置了一个基于事件的断点。 点击了任何节点，并且该节点具有 click 处理程序时，DevTools 会自动暂停在该节点 click 处理程序的第一行。
注：这不过是 DevTools 提供的众多断点类型中的一种。应使用的断点类型取决于您要调试的问题类型。
第 3 步：单步调试代码
一个常见的错误原因是脚本执行顺序有误。 可以通过单步调试代码一次一行地检查代码执行情况，准确找到执行顺序异常之处。
从左到右依次为:
重置调试器,使用后会立即回复到未暂停的状态
跳过函数调用, 使用后不会进入函数声明里,而是直接在当前函数里出结果
单步, 通常情况下也会单步库代码
直接从当前函数退出,将回退到上一个调用它的函数,这个一般用于函数体很长想要立即退出时使用
第 4 步：设置另一个断点
打完另外的断点后, 重置调试器会变成单步(只执行断点)的调试。
第 5 步：检查变量值
使用watch
可以看出watch里可以填表达式。
第 6 步：应用修正
您已找到错误的潜在解决方法。剩下的工作就是编辑代码后重新运行演示页面来测试修正效果。 您不必离开 DevTools 就能应用修正。 您可以直接在 DevTools UI 内编辑 JavaScript 代码。 立即试一试：
在 DevTools 的 Sources 面板上的代码编辑器中，将 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2);。它就是您当前暂停位置上面那行代码。
按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）保存更改。代码的背景色变为红色，这表示在 DevTools 内更改了脚本。
点击 Deactivate breakpoints 停用断点。它变为蓝色，表示处于活动状态。 如果进行了此设置，DevTools 会忽略您已设置的任何断点。
点击 Resume script execution
使用不同的值测试演示页面。现在演示页面应能正确计算求和
切记，此工作流程只对运行在浏览器中的代码应用修正。 它不会为所有运行您的页面的用户修正代码。 要实现该目的，您需要修正运行在提供页面的服务器上的代码。
注意要按一次保存
后续步骤
恭喜！现在您已掌握了在 DevTools 中调试 JavaScript 的基础知识。
本教程只向您介绍了两种设置断点的方法。DevTools 还提供了许多其他方法，其中包括：
仅在满足您指定的条件时触发的条件断点。
发生已捕获或未捕获异常时触发的断点。
当请求的网址与您提供的子字符串匹配时触发的 XHR 断点。