Sources

上一篇简介了调试工具里的 console，这次讲解调试工具里的另一个选项卡 Sources，断点调试，我们以一个谷歌的示例来讲解断点调试

这个示例很简单，两个数相加，但是结果不是正确的，我们来使用断掉调试来找到错误发生的原因，首先观察这个选项卡，分为了四个区域,第一个区域表示整个页面所加载的资源，top 表示整个页面，那个云朵符号的表示资源所在的域，可以看出来是在 github 里，这个域的里面存放着资源的文件结构

接下来我们开始调试，很明显错误发生在点击相加的按钮身上，我们通过 Elements 选项卡找到这个按钮的监听事件

点击 js 文件，跳转到了 Sources 选项卡，可以发现这个按钮绑定了哪些点击事件

我们要找出错误就先给代码打上断点，打上断点之后发现第三个区域展示出了我们打上的断点信息

我们重新点击按钮，发现代码运行到打上断点的那一行就停止了，这时候第四个区域发生了变化，它展示了代码运行到了断点之前能使用的所有的全局变量，局部变量等等

运行到这里第三个区域有一些选项供我们选择，第一个选项表示继续往前运行直到遇到下一个断点，第二个选项 Stepover 是执行完这一行代码跳到下一行代码，第三个 Stepinto 选项进入到这一行代码里的函数，第四个选项 Stepout 表示函数立即执行完，回到上一层的调用，不用一级一级的跳了

我们就用这些选项来找出代码运行错误的地方，我们先给 15 行和 19 行打上断点，点击按钮，代码运行到了 15 行就停止下来了，我们再点击 Stepover 发现代码来到了 19 行，所以代码并没有执行 if 语句里面的代码，我们继续点击 Stepinto 来到第 19 行代码里的函数

我们发现它的总数是调用两个方法返回的结果相加得到的，我们继续点击两次 Stepover，发现返回了两个字符串给我们

继续 Stepover 发现这两个值在相加，相加的结果为"11"，这时候错误就显而易见了，是一个字符串拼接而不是数值相加

发现错误是 getNumber1(),getNumber2()返回的结果不正确，修改后保存文件，把断点都打掉，点击第一个选项将代码运行完，继续点击运行，发现错误被改正了

总结

Sources 是一般的功能开发中最常用到也是最有用的功能面板，它里面的许多功能对于我们开发前端工程来说是非常有帮助的。在 web2.0 时代的今天，在自己的代码里面调试信息，会然你的开发变得繁琐，而 Chrome 开发工具给我们提供的强大功能，我们应该好好利用

谷歌示例地址：https://googlechrome.github.io/devtools-samples/debug-js/get-started 有兴趣的小伙伴可以动手尝试尝试😎😎😎