首页 > JavaScript > JavaScript 入门教程 > JavaScript debugger

debugger

debugger 语句调用任何可用的调试功能,例如设置断点。 如果没有调试功能可用,则此语句不起作用。(MDN)

debugger 通常用于调试,主要是为了设置一个断点。

如果浏览器支持 debugger,那碰到 debugger 就会暂停程序的执行,提供调试功能,如单步调试、跳出当前函数、结束调试等。

1. 使用 debugger

debugger; // 设置断点

在需要设置断点的地方写上 debugger 即可。

console.log(1);

var str = '在这里暂停';

debugger; // 设置断点

console.log(str);

console.log(1 + 1);

图片描述

断点设置好之后可以在开发者工具Sources 面板进行调试。

2. 其他设置断点的方式

假设对其他网站的某个实现细节很感兴趣,但又不能直接窥探出原理,也可以借助断点来进行调试。

这种情况下需要在 开发者工具Sources 面板找到对应的源码,打上断点。

图片描述

在源码的对应行号出点击,即可设置上断点,如果是已经执行过的代码,则需要刷新才会在断点处暂停程序。

很多情况下,都会利用事件来定位源码位置。

一个节点上的事件,可以通过 Elements 面板的 Event Listeners 来查看定位。

图片描述

3. 小结

debugger 用于设置断点,调试非常有用。

如果没有特殊需求, 一定要确保线上debugger 不会被执行!一定要确保线上 debugger 不会被执行!一定要确保线上 debugger 不会被执行!
这一点非常关键,带上线了直接影响用户体验,可能公司第二天就倒了。

本文来自互联网用户投稿,不拥有所有权,该文观点仅代表作者本人,不代表本站立场。
访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯本网站及相关权利人的合法权利。
本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站,邮箱:80764001@qq.com,予以删除。
© 2023 PV138 · 站点地图 · 免责声明 · 联系我们 · 问题反馈