Chrome DevTools 小贴士

14.断点调试相关的技巧

2021-03-15  本文已影响0人  阿啦啦啦啦啦
highlight-paused-statement.gif

调试器暂停后,您现在可以看到正在执行的代码的确切部分。它以高亮显示较深的蓝色阴影。这在调试精简代码时很有用。

debugger-shortcuts.gif

Toggle a breakpoint while on a line: Cmd + B (切换当前行的断点)
Select the next call frame: Ctrl + . (下一个调用栈)
Select the previous call frame: Ctrl + , (上一个调用栈)

补充

动图上点击的按钮是当遇到报错的时候,自动触发断点调试。
我们可以在源代码中添加 debugger 设置断点
可以在source面板中文件的行号前面单击设置断点 Cmd + B

通过DOM被修改,被移除命中断点

image.png

通过触发网络请求命中断点

image.png
上一篇 下一篇

猜你喜欢

热点阅读