JS `Chrome DevTools` `Sources` 面板高级断点：条件断点、DOM 断点、XHR/Fetch 断点

各位好，我是你们今天的断点导航员。今天咱们来聊聊Chrome DevTools里Sources面板那些“高级”断点技巧，注意我加了引号，因为它们其实并不难，只是很多人没好好利用而已。别怕，今天包教包会，让你的debug效率起飞！

第一站：条件断点 (Conditional Breakpoints)

想象一下，你正在调试一个循环，这个循环跑了1000次，但你只关心第999次循环时的变量状态。难道你要疯狂点999次“下一步”吗？别傻了，条件断点就是来拯救你的！

什么是条件断点？

条件断点允许你在特定条件满足时暂停代码执行。换句话说，你可以设置一个表达式，只有当这个表达式的值为 true 时，断点才会生效。

如何设置条件断点？

在Sources面板中找到你想设置断点的行。
右键点击行号，选择 "Add Conditional Breakpoint…"。
输入你的条件表达式。

举个栗子：

假设我们有以下代码：

function processArray(arr) {
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    console.log(`Processing element at index: ${i}, value: ${element}`);
  }
}

const myArray = [10, 20, 30, 40, 50];
processArray(myArray);

如果我们只想在 i 等于 3 的时候暂停代码，我们可以这样设置条件断点：

在 const element = arr[i]; 这一行右键点击，选择 "Add Conditional Breakpoint…"。
输入条件表达式：i === 3。

现在，当你运行这段代码时，程序会在 i 等于 3 的时候自动暂停。是不是很神奇？

更高级的栗子：

假设我们只想在 element 的值大于 30 的时候暂停代码：

同样在 const element = arr[i]; 这一行设置断点。
输入条件表达式：element > 30。

现在，程序会在 element 的值为 40 和 50 的时候暂停。

注意事项：

条件表达式必须是有效的 JavaScript 表达式，并且可以求值为 true 或 false。
条件断点的表达式可能会影响性能，所以debug完成后记得移除。
你可以在条件表达式中使用任何当前作用域内的变量。

表格总结：条件断点

特性	描述	举例
暂停条件	当表达式的值为 `true` 时暂停代码执行。	`i === 5`, `element > 100`, `typeof variable === 'string'`
设置方法	在Sources面板中，右键点击行号，选择 "Add Conditional Breakpoint…"。	在循环体内部设置断点，并设置条件 `i > 50 && element === 'specific'`
适用场景	在循环中查找特定值，在满足特定条件时调试代码。	调试大型数据集，只关注特定范围内的值。

第二站：DOM 断点 (DOM Breakpoints)

有时候，网页上的某个元素突然抽风，样式乱了，内容不见了。你想知道是谁动了它，但又不知道从何下手。DOM 断点就是你的救星！

什么是 DOM 断点？

DOM 断点允许你在 DOM 树发生特定变化时暂停代码执行。你可以监听三种类型的 DOM 变化：

subtree modified: 监听目标元素及其子元素的任何变化。
attribute modified: 监听目标元素属性的变化。
node removed: 监听目标元素被移除。

如何设置 DOM 断点？

在Elements面板中找到你想监听的元素。
右键点击该元素，选择 "Break on…"。
选择你想监听的 DOM 变化类型。

举个栗子：

假设我们有以下 HTML 结构：

<div id="myDiv">
  <p>Hello, world!</p>
</div>

我们想知道是谁修改了 myDiv 的 class 属性。我们可以这样设置 DOM 断点：

在Elements面板中找到 myDiv 元素。
右键点击 myDiv，选择 "Break on…" -> "Attribute Modifications"。

现在，任何修改 myDiv 的 class 属性的代码都会触发断点。

另一个栗子：

我们想知道是谁移除了 myDiv 的子元素。我们可以这样设置 DOM 断点：

在Elements面板中找到 myDiv 元素。
右键点击 myDiv，选择 "Break on…" -> "Subtree Modifications"。

现在，任何移除 myDiv 子元素的代码都会触发断点。

注意事项：

DOM 断点会显著影响性能，所以调试完成后记得移除。
DOM 断点是在 JavaScript 代码修改 DOM 树时触发的，而不是在 CSS 修改样式时触发的。

表格总结：DOM 断点

类型	描述	举例
Subtree Modifications	监听目标元素及其子元素的任何变化（添加、删除、修改）。	查找是谁动态添加/移除了某个列表项。
Attribute Modifications	监听目标元素属性的变化。	查找是谁修改了按钮的 `disabled` 属性。
Node Removal	监听目标元素被移除。	查找是谁从页面中删除了某个重要元素。
设置方法	在Elements面板中，右键点击元素，选择 "Break on…"。	监听一个容器元素的 Subtree Modifications，以便追踪其子元素的任何变化。
适用场景	追踪 DOM 树的变化，查找是谁修改了页面结构。	调试动态渲染的页面，查找导致元素消失的原因。

第三站：XHR/Fetch 断点 (XHR/Fetch Breakpoints)

Web 应用离不开网络请求，但有时候网络请求会出问题：请求失败、返回数据错误、请求时间过长……XHR/Fetch 断点可以让你轻松追踪这些问题。

什么是 XHR/Fetch 断点？

XHR/Fetch 断点允许你在特定的 XHR (XMLHttpRequest) 或 Fetch 请求发生时暂停代码执行。你可以监听两种类型的 XHR/Fetch 事件：

Any XHR: 监听所有 XHR 请求。
URL Contains: 监听 URL 包含特定字符串的 XHR 请求。

对于 Fetch 请求，DevTools 会自动将其视为 XHR 请求的一种，并使用相同的断点机制。

如何设置 XHR/Fetch 断点？

在Sources面板中找到 "XHR/fetch Breakpoints" 面板（通常在右侧）。
点击 "+" 按钮添加断点。
如果你想监听所有 XHR 请求，就直接添加一个空的断点。
如果你只想监听特定 URL 的 XHR 请求，就在输入框中输入 URL 包含的字符串。

举个栗子：

我们想监听所有发送到 /api/users 的 XHR 请求。我们可以这样设置 XHR/Fetch 断点：

在Sources面板中找到 "XHR/fetch Breakpoints" 面板。
点击 "+" 按钮。
输入 /api/users。

现在，任何发送到 /api/users 的 XHR 请求都会触发断点。

注意事项：

XHR/Fetch 断点是在 XHR/Fetch 请求发送之前和接收到响应之后触发的。
你可以在断点处查看请求的 URL、Headers、Body 等信息。
如果你设置了多个 XHR/Fetch 断点，它们会按照添加的顺序依次触发。

更高级的栗子：

假设我们有一个 Fetch 请求：

fetch('/api/products')
  .then(response => response.json())
  .then(data => {
    console.log('Products data:', data);
  });

我们可以设置一个 XHR/Fetch 断点，监听所有包含 /api/products 的请求，然后在断点处查看 response 对象，检查返回的状态码和数据。

表格总结：XHR/Fetch 断点

类型	描述	举例
Any XHR	监听所有 XHR/Fetch 请求。	追踪所有网络请求，查找是否存在异常请求。
URL Contains	监听 URL 包含特定字符串的 XHR/Fetch 请求。	监听特定 API 的请求，例如 `/api/users` 或 `/api/products`。
设置方法	在Sources面板中，找到 "XHR/fetch Breakpoints" 面板，点击 "+" 按钮。	输入一个 URL 包含的字符串，例如 `/api/`，以监听所有 API 请求。
适用场景	追踪网络请求，调试 API 调用，查找请求失败的原因。	调试前端与后端交互，查找数据传输问题。

综合运用：

现在，让我们把这三种断点技巧结合起来，解决一个实际问题。

假设我们有一个网页，用户点击一个按钮会发送一个 XHR 请求，然后页面上的一个 div 会显示返回的数据。但是，有时候 div 的内容显示不正确。我们想找出问题的原因。

设置 XHR/Fetch 断点： 监听发送到 API 的 XHR 请求，检查返回的数据是否正确。
设置 DOM 断点： 监听 div 元素的 Subtree Modifications，看看是谁修改了 div 的内容。
设置条件断点： 如果 XHR 请求返回的数据是数组，我们可以在循环中设置条件断点，只在特定条件下暂停代码执行。

通过这三种断点技巧的配合使用，我们可以快速定位问题，并找到解决方案。

总结：

今天我们学习了 Chrome DevTools Sources 面板的三种“高级”断点技巧：条件断点、DOM 断点和 XHR/Fetch 断点。这些技巧可以帮助你更高效地调试代码，解决各种疑难杂症。记住，熟练掌握这些技巧需要不断练习，希望今天的讲座能给你带来一些启发。

调试愉快！下次再见！

发表回复 取消回复

发表回复取消回复