这篇文章教会你精确的Debug姿势。你将会学会利用谷歌开拓者工具(Chrome Developer Tools)来设置断点并单步实行代码。比较于打印日志，这样会高效得多。
本文针对一种特定类型的问题来演示如何利用谷歌开拓者工具Debug，该方法同样适用于其它通用问题。
第一步：复现BUG
Debugging的第一步每每是复现bug。“复现BUG”是指找到一个行为序列可以100%触发bug。你须要复现bug很多遍，因此，只管即便肃清不必要的步骤。
参照下面的流程来复现这篇文章将要修复的一个bug：
这里有一个我们要利用到的网页。在新的标签打开它：打开Demo
在Number 1的输入框输入5
在Number 2的输入框输入1
点击Add Number 1 and Number 2按钮
不才方会输出5 + 1 = 51
该当输出为6, 而不是51。
第二步：利用断点来停息代码实行
谷歌开拓者工具可以让你终端代码实行，并查看此时所有的变量值。用来中断实行的工具叫做breakpoint。如下操作：
回到Demo页面，打开开拓者工具(Mac: Command + Option + I, Window, Linux: Control + Shift + I)。
点击Source标签
点击Event Listener Breakpoints，将里面的内容展开。开拓者工具会展开一列，个中包含Animation，Clipboard
将鼠标移到Mouse前面, 点击三角展开里面的内容
选中click
回到demo，点击Add Number 1 and Number 2。开拓者工具会将Demo的实行停息，并且在Source部分高亮如下代码：
function onClick() {为什么？
当你在Event Listener Breakpoints选择了Mouse click, 那么所有的点击事宜都会被设置断点。因此，任何一个节点被点击，并且该节点有定义点击事宜，那么开拓者工具(DevTools)会自动在该点击事宜Handler的第一行处停息。
第三步：单步实行调试代码
一个常见的bug是：脚本的实行顺序缺点。单步调试让你一步一步随着代码的实行逻辑走，一次移动一行代码，那么你就会清楚代码是按照哪个的顺序实行的。我们来试一下：
在开拓者工具的Source面板，点击第三个(Step into next function call)，
Step into next function call
该按钮勾引你单步实行定义的点击事宜，一次一行。点击后，第15行代码高亮：
现在点击第二个(Step over next function call)按钮
Step over next function call
该按钮会跳过当前要实行的函数inutsAreEmpty，而不是进入该函数。同时直接跳到第19行，由于当前输入框不为空。
这便是单步调试代码的基本思路。如果你仔细阅读get-started.js，会创造bug可能就隐蔽在updateLabel函数的某个地方。除了利用单步调试以外，你还可以利用另一种断点。
第四步：设置另一个断点
如果你想在某一行设置断点，可以利用行断点(line-of-code breakpoint)。
找到updateLabel函数的末了一行，
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;在代码的左边，你可以看到显示的行号32。点击32，开拓者工具会在行号出显示一个蓝色的标记。该标记表示行断点设置成功。代码总会在实行到这一行的时候中断。
点击第一个Resume script execution按钮
Resume script execution button
代码会持续实行到第32行。
在左侧，Local部分已经将addend1，addend2和sum的值都显示出来了。
你就会创造它们都是字符串，字符串相加便是将它们拼接起来，然而我们想要的是数字求和。
第五步：检讨变量值
另一个常见的情形便是变量或则函数的返回值和期望值不一样。很多开拓者都利用console.log来查看值的变革，但是利用console.log很麻烦而且非常低效。首先，你须要手动添加很多console.log，其次，在你还不清楚哪个变量会引发bug之前，你须要把很多变量值打印出来。
谷歌开拓者工具一个很好的功能便是不雅观察表达式(Watch Expressions)，可以一贯监控变量值的变革。不雅观察表达式不仅可以用于不雅观察变量值，你可以用来监控任意表达式。我们来试一试：
在开拓者面板下的Source面板，点击Watch,展开里面的内容(初次展开为空)。
点击右侧的+号(Add Expression)
Add Expression button
输入typeof sum
敲击回车键。开拓者面板会显示typeof sum: \公众string\"大众。
正如我们推测：sum的类型是字符串。
console.log的另一个替代品是直策应用Console。我么可以利用Console来实行任意的JavaScript表达式。开拓者常日利用Console来重写变量值来debug。我们可以利用Console来验证可能的办理方案。
如果Console没有显示出来，敲击ESC键来打开。它会在开拓者面板的最下方打开。
在Console中输入parseInt(addend1) + parseInt(addend2)
敲击回车键，输出6。
第六步：修复BUG
我们已经找到了潜在的修复方案，无需离开开拓者面板，我们可以直接在开拓者面板编辑源代码。
在开拓者工具的Source面板，将源代码中var sum = addend1 + addend2更换为var sum = parseInt(addend1) + parseInt(addend2);。
保存改动(Mac: Command + S, Window, Linux: Control + S)。
点击第五个Deactivate breakpoints按钮
Deactivate breakpoints button
该按钮取消所有设置的断点。
点击第一个Resume script execution按钮
Resume script execution button
输入不同的值试一试，看看是否可以正常实行。
