chrome浏览器设置断点（翻译）

朱雀 2022-07-24 11:01 579阅读 0赞

原文地址： [https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints][https_developers.google.com_web_tools_chrome-devtools_debug_breakpoints_add-breakpoints]

调试代码最有效的方式就是设置断点. 启用断点将允许你终止脚本执行 然后查看调用栈的变量值 在该特定时刻.

这里您可以设置俩种类型的断点: 手动和有条件的.

*  手动断点设置是在特定的代码行上设置断点. 你可以设置通过 Chrome 图形界面开发工具, 或者在你的代码里插入关键词  `debugger` .
 *  条件断点会在满足特点条件时被触发 (例如. 一个 `onclick`  事件触发, 一个异常抛出等,). 你可以开启他通过 开发者工具 , DevTools 会为你自动设置断点.

### 内容 ###

1.  [查看断点][Link 1]
2.  [创建手动断点][Link 2]
3.  [创建条件断点][Link 3]

###     ###

### 将会使用到三种类型demo ###

*  在代码的指定一行使用手动代码终止脚本执行.
 *  使用条件断点当指定条件被满足的时候.
 *  设置条件断点在 DOM 节点被改变的时候, XHR 请求, event 事件监听, 和捕获异常.

##     ##

## 查看断点 ##

任何时候查看存在的断点在  Sources  资源面板里

1.  打开 Chrome 菜单 ![Chrome menu][].
2.  选择  More tools > Developer tools, 或者右击页面上的一个元素然后菜单中选择 Inspect element .
3.  选择 Sources 资源面板

断点显示在侧边栏 sidebar, 按类型进行分组.

![Breakpoints sidebar][Chrome menu]![Center][]

##     ##

## 创建手动断点 ##

手动断点是你设置在单行代码上. 这里有俩种方式设置断点, 通过开发者工具, 或者在你的代码中插入关键词  `debugger`

使用手动断点在你强烈怀疑你的代码会失败的时候, 你想查看回调栈和变量.

###     ###

### 在单行代码上添加手动断点 ###

添加一行断点

*  点击你想设置断点所在行的行号. 你能添加多个断点通过点击行号.
 *  添加 `debugger` 关键词在你的代码里, 等价于上面的点击行号.  
    ![Center 1][]

![Line breakpoint][Chrome menu]

临时关闭一个断点, 在侧边栏 关闭复选框即可.

移除一个断点, 点击所在行号即可  或者 右击 侧边栏的断点 选择 Remove breakpoint.

##     ##

## 创建条件断点 ##

条件断点会触发当一个指定条件被满足的时候(例如. 一个  `onclick` 事件触发的时候, 或者一个未知异常被捕获的时候). 你可以启用通过  DevTools GUI, 然后 DevTools 会自动

中断当指定条件满足的时候.

使用条件断点 当你一次需要设置多个断点时. 例如, 假设你遇到错误当 DOM 节点被移除时. 可能会有20种不同的错误来源，不可能每一个可疑的语句前放置一个手动断点，你可以设置一个条件断点。断点被触发，只要任何代码删除DOM节点。

DevTools提供四种条件断点：

*  DOM 变动 事件 (添加, 修改, 移除)
 *  `XMLHttpRequest`
 *  JavaScript event 监听
 *  Uncaught exceptions 捕获异常

###     ###

###  DOM 变动 event 之前中断 ###

使用 DOM 变动 event 断点当脚本 添加, 修改, 或者移除 一个 DOM 节点 你想隔离他来观察变化. 执行中断当一个指定的 DOM 节点被修改, 在修改之前应用 (看 [Edit the DOM][]).

添加一个 DOM 变动断点, 打开 Elements 面板然后右击一个元素. 在菜单中选择,  Break on…, 然后选择一个可选条件: Subtree modifications, Attributes modifications, 或者 Node removal.

![DOM mutation breakpoint][Chrome menu]

![Center 2][]

临时关闭一个 DOM 可以通过 选择侧边栏的 复选框.

移除一个 DOM 断点, 再次右击元素, 点击 Break on…, 然后选择当前启用的元素. 或者, 右击在侧边栏中的断点选择 Remove breakpoint.

###     ###

### 在 `XMLHttpRequest ``中断` ###

有两种方式你能为  `XMLHttpRequest ``创建条件断点`:

*  当请求的 URL 包含一个指定的字符串时. DevTools 开发者工具在请求之前中断.
 *  在一个指定的  `XMLHttpRequest` event 事件之前 (例如. `load 加载`, `timeout 超时`, `error 错误`). DevTools 会正确中断在 `XMLHttpRequest` 事件触发时.

####     ####

#### 中断当 XMLHttpRequest URL 包含指定字符串 ####

中断当 `XMLHttpRequest` URL 包含一个指定字符串:

1.  点击 Add XHR breakpoint 按钮 ![Add XHR breakpoint][Chrome menu] 在侧边栏.
2.  在 Break when URL contains 字段里, 键入您希望 URL 包含的字符串 来导致 XHR 请求中断并按  Enter.

![XMLHttpRequest breakpoint][Chrome menu]

![Center 3][]

编辑这个字段, 双击断点.

移除这个断点, 右击侧边栏的断点, 然后选择  Remove breakpoint.

#### 在指定的 `XMLHttpRequest` event 事件之前中断 ####

在指定的 `XMLHttpRequest` event 事件触发之前中断:

1.  找到 Event Listener Breakpoints 面板.
2.  扩展 XHR 下拉菜单.
3.  选择事件周期中你想中断的事件. DevTools 将中断这个状态在所有 `XMLHttpRequest` events 的事件中.

![Available breakpoints for XMLHttpRequest events][Chrome menu]![Center 4][]

###     ###

### 中断 JavaScript event 事件监听被触发时 ###

使用JavaScript event listener 断点 如果你想了解由脚本处理的某个事件 (例如按下 或 双击) . 执行中断在事件监听被触发时(看 [View element event listeners][]).

添加 JavaScript event listener 断点:

1.  展开侧边栏的 Event Listener Breakpoints 区域 , 然后展开你想中断的事件 (Animation, Clipboard, Control, 等.).
2.  在目录展开下面, 点击复选框选择 中断监听的事件类型. 选择所有, 点击目录本身的复选框.

![Event listener breakpoint][Chrome menu]

![Center 5][]

移除事件通过清除选择复选框.

[https_developers.google.com_web_tools_chrome-devtools_debug_breakpoints_add-breakpoints]: https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints
[Link 1]: https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints#view-breakpoints
[Link 2]: https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints#create-manual-breakpoints
[Link 3]: https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints#create-conditional-breakpoints
[Chrome menu]: 
[Center]: /images/20220722/4644b1ccd36e4a31aa2bcaf918875d3b.png
[Center 1]: /images/20220722/bc422dced9c843198f6ddbf27f362f8b.png
[Edit the DOM]: https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/edit-dom
[Center 2]: /images/20220722/e36a4e8eaf4a4396978fdca232e520c9.png
[Center 3]: /images/20220722/a97ae2ec5bb84bc9a99d594376fda4e7.png
[Center 4]: /images/20220722/29d99b2b486f46a8bc2f2844a2e355a8.png
[View element event listeners]: https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/edit-dom#view-element-event-listeners
[Center 5]: /images/20220722/5db4b841691543a4a633e5fb813ffdbb.png