创作背景
平常开发时我们去解决bug可能会用console.log来来调试，但是断点可以更快地完成工作。
- log调试的劣势：但是使用console.log时需要我们手动的打开源码，找到相关代码，插入log语句，然后重新加载页面，才能在控制台中查看这些消息；使用log语句时，需要明确指定要检查的每个值。
- 断点调试的优势：无需了解代码结构即可暂停相关的代码；使用断点，开发者工具会及时显示所有变量的值（因为有些时候，有些变量在你不知情的情况下也会影响你的代码）
演示网址
断点调试演示网址
调试步骤
重现bug
开始调试的前提是你能够一致性地重现bug：在两个输入框输入number1和number2后点击下方按钮。反复执行此操作，你会发现得到的值与预期不同，这就是你要修复的bug！
打开来源标签页
F12打开chrome的开发者工具，选择并打开来源标签页（sources），找到js文件
来源标签页界面说明
使用断点暂停代码
在javascript调试窗格中，点击事件监听器（Event listener breakpoints）->Mouse->click。此步骤的作用是开启鼠标点击事件的断点监听（开发者工具现已设置为在执行任何 click 事件监听器时自动暂停，因为bug出现在点击计算结果的按钮附近，所以我们需要在点击事件处打断点）
返回演示，再次点击Add Number 1 and Number 2。开发者工具会在点击事件函数处暂停
事件监听断点只是开发者工具中提供的众多断点类型的一种，如下图有很多种
单步调试代码
导致bug的一种常见原因是脚本执行顺序有误。我们可以通过单步调试代码一次一行地检查代码的执行情况，并弄清楚代码的执行顺序与预期不同。
点击下方按钮就可以逐步执行代码进行调试（会执行每一小步） 
点击下方按钮开发者工具会执行函数，但不会进入它
设置代码行断点
如果想指定执行到某一行代码时暂停，则可使用代码行断点。点击代码左边的代码行数就可以设置断点
设置完断点后，点击AddNumber1…按钮，代码执行会暂停在32行断点处，点击下方图标按钮后，代码继续执行至完毕（29、30、31行，开发者工具以内嵌方式显示addend1、adaddend2、sum的值）
继续执行按钮
检查变量值
- 法一——Scope窗格
- 法二——监视表达式watch
点击➕可以新增表达式。可以把任何有效的javascript表达式储存在监视表达式中（例如我输入了typeof addend1和sum等…）
- 法三——控制台
可以直接在控制台对任意javascript语句求值。在测试方面，可以使用控制台测试bug的潜在解决方法。（esc打开控制台）
23+3=26。说明这个解决方法是正确的，可应用。
应用解决方案
经过上一步的变量值检查，我们已经找到了bug的出处以及它的解决办法，现在就来应用解决方案。你无需离开开发者工具即可修复，直接在开发者工具界面中修改javascript代码
- 点击继续执行脚本，直至脚本执行完‘在代码编辑器中，将31行var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2)
- 按Command+S（Mac）或Ctrl+S（Windows）以保存更改
- 点击停用断点图标，使开发者工具忽略你已设置的任何断点
- 直接在界面中输入不同值进行测试
结尾
好！你已经学会了如何在调试javascript时充分利用Chrome开发者工具。
本篇文章介绍了两种设置断点的方法：
- 代码行断点
- 事件监听器断点
另外，开发者工具还提供了许多其他的方式：
