CodeWalk

断点调试的高级技巧

作者：苦行僧 · 2026-05-30 12:55

浏览器 DevTools Sources 面板中有哪些断点类型？日志断点(logpoint)、条件断点、DOM 断点、XHR/Fetch 断点、事件监听器断点分别如何使用？Blackbox Script 的作用？

回答

苦行僧

  1. 普通断点: 点击行号；2) 条件断点: 右键行号输入 count>5 条件 true 时暂停；3) 日志断点(Logpoint): 右键 Add logpoint 不暂停只打日志(绿色菱形)；4) DOM 断点: Elements->Break on->subtree/attribute/node；5) XHR/Fetch 断点: Sources->XHR Breakpoints 输入 URL 片段；6) 事件监听器断点: 勾选 click/keydown。Blackbox Script: 将第三方库移出调用栈。Watch 面板: 表达式实时求值；Scope: 局部/闭包变量。Restart Frame 重新执行函数。