如何给JavaScript代码添加断点调试

点击有惊喜


之前打断点都只会看他自己出现的数据,而且一段时间不用总是找不到在哪里,今天就本着好脑袋不如赖笔头的想法来记录下浏览器断点的使用。本文以谷歌浏览器为准:

首先我们使用chrome浏览器打开我们需要调试的页面并按“F12”键打开“开发者工具”,如下图:
如何给JavaScript代码添加断点调试_第1张图片

控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。选择“开发者工具”中的“Sources”选项,如下图:
如何给JavaScript代码添加断点调试_第2张图片

然后点击左面的选项打开需要调试的JavaScript代码文件,此时在右面就出现了我们需要调试的JavaScript代码如下图::
如何给JavaScript代码添加断点调试_第3张图片

然后我们就可以在代码左侧的“行数”上点击鼠标左键添加断点或者再次点击取消断点,如下图
如何给JavaScript代码添加断点调试_第4张图片

此时我们便可以使JavaScript代码分步执行,使我们能清楚的看清每一行代码的作用和整段代码的执行流程,点击“paused in debugger”按钮执行下一步,从中也可以看到每行代码的赋值情况等
如何给JavaScript代码添加断点调试_第5张图片


点击有惊喜

如何给JavaScript代码添加断点调试_第6张图片

你可能感兴趣的:(如何给JavaScript代码添加断点调试)