如何给JavaScript代码添加断点调试-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 之前打断点都只会看他自己出现的数据,而且一段时间不用总是找不到在哪里,今天就本着好脑袋不如赖笔头的想法来记录下浏览器断点的使用。本文以谷歌浏览器为准: 首先我们使用chrome浏览器打开我们需要调试的页面并按“F12”键打开“开发者工具”,如下图: 控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。

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

首先我们使用chrome浏览器打开我们需要调试的页面并按“F12”键打开“开发者工具”,如下图:
1

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

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

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

此时我们便可以使JavaScript代码分步执行,使我们能清楚的看清每一行代码的作用和整段代码的执行流程,点击“paused in debugger”按钮执行下一步,从中也可以看到每行代码的赋值情况等
5

同时,可以把鼠标移到你需要查看数据的函数或变量查看他的内容和类型

执行过程中,如果我们要执行即时的代码,就需要在console的窗格中输入代码,按回车即可

在这里,我们可以使用快捷键进行操作,常用的快捷键如下:

F9:添加/移除 断点

F10:逐过程,即跳过该语句中的方法、表达式等

F11:逐语句调试,即单步调试,会跳入方法、表达式,进行逐语句的跟踪调试

总结一下,就是:用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!
感悟:不要怪社会太快,只能怪自己太慢

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章