浏览器开发者工具中的断点调试：功能与使用方法

一、断点类型及设置方法

（一）代码行断点

（二）条件断点

条件断点允许代码仅在满足特定条件时暂停执行，适合在循环或复杂逻辑中使用。设置方法如下：

1. 右键点击代码行号，选择“Add conditional breakpoint”。
2. 输入条件表达式（如 0 === 10），只有当条件为真时，代码才会暂停。

（三）DOM 更改断点

当需要跟踪 DOM 元素的修改时，可以使用 DOM 更改断点。设置方法：

1. 在“Elements”（元素）面板中选择目标 DOM 元素。
2. 右键点击元素，选择“Break on” > “Subtree modifications”（子树修改）、“Attribute modifications”（属性修改）或“Node removal”（节点删除）。

（四）XHR/fetch 断点

当需要调试网络请求时，可以设置 XHR/fetch 断点。设置方法：

1. 在“Sources”面板中展开“XHR/fetch breakpoints”面板。
2. 输入请求的 URL（全部或部分），当匹配的请求发生时，代码会暂停。

   （五）事件监听器断点

   如果需要调试与事件相关的代码，可以设置事件监听器断点。设置方法：

   1. 在“Sources”面板中展开“Event Listener Breakpoints”面板。
   2. 选择特定事件（如 click）或事件类别（如所有鼠标事件），当触发该事件时，代码会暂停

（六）异常断点

当代码抛出异常时，异常断点可以自动暂停执行。设置方法：

1. 在“Sources”面板的“Breakpoints”窗格中，勾选“Pause on uncaught exceptions”（未捕获异常暂停）或“Pause on caught exceptions”（捕获异常暂停）。

（七）日志点（Logpoints）

日志点是一种特殊的断点，它不会暂停代码执行，而是直接将消息记录到控制台。设置方法：

1. 右键点击代码行号，选择“Add logpoint”。
2. 输入要记录的消息或表达式，当代码运行到该行时，消息会自动记录到控制台。

怎么打断点

 

方式	操作
行断点	Sources → 打开 JS 文件 → 点击行号左侧 → 出现蓝色圆点
条件断点	右键行号 → "Add conditional breakpoint" → 输入条件（如 i > 10）
日志断点	右键行号 → "Add logpoint" → 输入内容，不暂停只打印
DOM 断点	Elements → 右键元素 → Break on → 选子树修改/属性修改/节点移除
XHR 断点	Sources → 右侧 XHR Breakpoints → 输入 URL 关键词
事件断点	Sources → 右侧 Event Listener Breakpoints → 勾选事件（如 click）

暂停后怎么操作

 

快捷键	作用
F8	继续执行，到下一个断点
F10	单步跳过（不进入函数内部）
F11	单步进入（进入函数内部）
Shift+F11	单步跳出（从当前函数跳出）

在代码暂停时，开发者工具会显示当前作用域中的变量。可以通过以下方式查看变量值：

•  1.在“Scope”面板中查看局部变量、全局变量和闭包中的变量。
•  2 鼠标悬停在变量名上，查看其当前值。
•  
• Call Stack 面板 → “Call Stack”面板显示当前代码的调用路径。通过点击调用栈中的某一项，可以快速跳转到该函数的代码位置。
• Watch 面板 → 在“Watch”面板中添加表达式，可以实时监控其值。点击“+”按钮或右击，输入需要监视的变量或表达式