chrome调试工具之Sources

格斗家不爱在外太空沉思
364 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

Sources

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

image.png

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

1665558554468.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

image.png

总结

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

谷歌示例地址：googlechrome.github.io/devtools-sa… 有兴趣的小伙伴可以动手尝试尝试😎😎😎

avatar
文章
阅读
粉丝