由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript。
一、案发现场
为了方便理解，我写了一个小demo。
点击打开demo；
在num1中输入6；
在num2中输入9；
点击 num1+num2，按钮下方的标签显示 69，结果应为 15，这就是我们需要断点调试找出的 BUG 。
二、熟悉一下 Sources 面板
DevTools 可为更改 CSS、分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具。 我们就在 Sources 面板中调试 JavaScript。
通过按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打开 DevTools。 此快捷方式可打开 Console 面板。点击 Sources 面板。
Sources 面板包含 3 个部分：
文件预览 窗口。 此处列出页面请求的每个文件。
代码编辑 窗口。 在 文件预览 窗口中选择文件后，此处会显示该文件的具体内容。
JavaScript 调试 窗口。 包含检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较窄，此窗口会显示在 代码编辑 窗口下方。
三、使用断点暂停代码
调试上面这种问题的常用方法是将多个 console.log() 语句插入代码，以便在执行脚本的时候检查相关变量的值。
虽然 console.log() 方法可以完成任务，但断点可以更快完成此任务。 断点可在执行代码的过程中暂停代码，并在此时及时检查所有相关变量的值。 与 console.log() 方法相比，断点具有一些优势：
使用 console.log()，需要手动打开源代码，查找相关代码，插入 console.log() 语句，然后重新加载此页面，才能在控制台中看到这些消息。 使用断点，无需了解代码结构即可暂停相关代码。
在 console.log()语句中，您需要明确指定要检查的每个值。 使用断点，DevTools 会在暂停时及时显示所有变量值。简言之，与 console.log() 方法相比，断点可以更快地查找和修正 BUG 。
接下来我们开始思考一开始抛出的程序的运作方式，我们可以根据经验推测出，我们在点击num1+num2按钮的时候触发的 click 事件肯定和 6+9=69 计算不正确有关系。 因此，我们可能需要在 click 侦听器运行的时候暂停代码。
Event Listener Breakpoints 可以完成此任务：
在 JavaScript 调试 窗口中，点击 Event Listener Breakpoints 前面的展开按钮。 可以看见 Animation、Canvas、Clipboard 等一系列事件；
在页面输入框中输入num1和num2的值；
展开 Mouse 事件，每个事件旁都有一个复选框。勾选 click 复选框。 DevTools 现在可以在任何 click 事件侦听器运行时自动暂停。
点击页面中的num1+num2按钮。此时页面如下图：
这是因为我装的浏览器插件导致的定位不准，最好在无痕模式进行操作。不过也不影响，我们点击一下最左边页面上的蓝色按钮，再点击中间的打括号（格式化代码），就可以定位准确并且格式化好代码：
四、检查变量的值
1. Scope窗口
在某代码行暂停时，Scope 窗格会显示当前定义的局部和全局变量，以及各变量值。 其中还会显示闭包变量（如果适用）。 双击变量值可进行编辑。 如果不在任何代码行暂停，则 Scope 窗格为空。
2. Watch监听变量变化
Watch 标签可监视变量值随时间变化的情况。 并且，监视不仅限于监视变量。 我们可以将任何有效的 JavaScript 表达式存储在监视表达式中。 我们尝试这样：
- 点击 Watch 标签。
- 点击 右边的 + 添加表达式。
- 输入 typeof n。 按 Enter 键。（这里代码是打包后的，n表示num1输入框的值）
- DevTools 会显示 typeof n: "string"。 冒号右侧的值就是监视表达式的结果。
3. 控制台
控制台除了查看 console.log() 消息以外，还可以使用控制台对任意 JavaScript 语句求值。 对于调试，可以使用控制台测试 BUG 的潜在解决方法:
在 Console 中，输入 `parseInt(n) + parseInt(u)`。 此语句有效，因为我们会在特定代码行暂停，其中 `n`（num1的值） 和 `u`（num2的值） 在范围内。
按 Enter 键。 DevTools 对语句求值并打印输出 15，即我们预计demo页面会产生的结果。
五、尝试修改
上一步我们已找到解决 BUG 的方法。 接下来就是尝试通过编辑代码并重新运行demo来使用修正方法。 我们可以在 代码编辑 窗口直接修改代码：
在 代码编辑 窗口中，将代码格式化关掉，然后修改代码，将 n+u 换成 parseInt(n)+parseInt(u) 。
按 Command+S (Mac) 或 Control+S（Windows、Linux）以保存更改。
点击 Deactivate breakpoints 取消激活断点。 其将变为蓝色，表示处于活动状态。 在完成此设置后，DevTools 会忽略您已设置的任何断点。
点击num1+num2按钮，则会看见正确的结果啦！
Tips: 这样做只能修正在浏览器中运行的代码， 不能为访问您页面的所有用户修正代码。 为此，我需要修改自己服务器上的代码。
六、介绍其他几种断点