Chrome DevTools Blackboxing 和 Conditional Breakpoints 在复杂代码调试中的高级应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位前端的英雄们，大家好！今天咱们来聊聊Chrome DevTools里两个听起来高大上，用起来贼顺手的家伙：Blackboxing和Conditional Breakpoints。别怕，这俩玩意儿不是黑魔法，也不是什么深奥的理论物理，它们只是你在代码丛林里披荆斩棘的利器。

第一部分：Blackboxing，让别人的代码见鬼去吧！（开玩笑，只是略过而已）

想象一下，你正在调试一个复杂的项目，里面塞满了各种第三方库、框架，甚至还有你根本不想读的前同事写的代码（手动狗头）。每次单步调试，都得一头扎进这些你既不关心，又看不懂的代码里，简直是浪费生命！这时候，Blackboxing就闪亮登场了。

1. 什么是Blackboxing？

Blackboxing，顾名思义，就是把一段代码“黑盒化”。DevTools会忽略掉被Blackboxed的代码，在单步调试时直接跳过。这样，你就可以专注于自己编写的代码，而不用被那些无关紧要的代码所干扰。

2. 如何Blackbox一段代码？

方法很简单，有两种：

方法一：直接在Sources面板里右键点击文件或文件夹
1. 打开Chrome DevTools，切换到Sources面板。
2. 在左侧的文件导航栏里，找到你想Blackbox的文件或文件夹。
3. 右键点击，选择“Blackbox Script”或者“Blackbox Folder”。
搞定！DevTools会在文件名旁边显示一个小图标，告诉你这段代码已经被黑盒化了。
方法二：通过Settings面板配置
1. 打开Chrome DevTools，点击右上角的三个点，选择“Settings”。
2. 在左侧菜单里，选择“Ignore List”。
3. 在这里，你可以添加需要Blackbox的文件或文件夹的路径，支持通配符。
例如，你可以添加 node_modules/* 来Blackbox整个node_modules文件夹。

3. Blackboxing的实际应用案例

忽略第三方库： 比如，你使用了React，但你并不想在调试时进入React的源码。你可以Blackbox node_modules/react 和 node_modules/react-dom。
忽略框架代码： 比如，你使用了Angular，你可以Blackbox @angular/*。
忽略构建工具生成的代码： 比如，你使用了Webpack，你可以Blackbox webpack-generated/*。

代码示例：

假设你有以下目录结构：

project/
├── src/
│   ├── index.js
│   └── myComponent.js
├── node_modules/
│   └── react/
│       └── react.js

index.js:

import React from 'react';
import MyComponent from './myComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

myComponent.js:

import React from 'react';

function MyComponent() {
  console.log("MyComponent rendered"); // 你想调试这行
  return (
    <div>
      Hello from MyComponent!
    </div>
  );
}

export default MyComponent;

如果你不Blackbox React，单步调试会进入react.js的源码，这并不是你想要的。所以，你可以Blackbox node_modules/react/react.js 或者 node_modules/react。

4. Blackboxing的注意事项

Blackboxing只是忽略代码，并不会影响代码的执行。
如果你想取消Blackbox，只需要在Sources面板里右键点击文件或文件夹，选择“Un-Blackbox Script”或者“Un-Blackbox Folder”。或者在Settings面板里删除相应的配置。
Blackboxing对于调试第三方库或框架非常有用，但也要注意，如果你需要深入了解这些库或框架的内部实现，就不要Blackbox它们。
Blackboxing是针对文件级别的，这意味着你无法Blackbox一个文件中的一部分代码。

第二部分：Conditional Breakpoints，让断点听你的话！

调试过程中，你是否遇到过这样的情况：你需要在一个循环或者递归函数里设置断点，但你只想在特定的条件下暂停？如果你直接设置一个普通断点，每次循环都会触发，简直是噩梦！ Conditional Breakpoints就是来拯救你的。

1. 什么是Conditional Breakpoints？

Conditional Breakpoints，顾名思义，就是带有条件的断点。只有当条件满足时，断点才会触发。这样，你就可以精确地控制断点的行为，避免不必要的暂停。

2. 如何设置Conditional Breakpoints？

方法也很简单：

打开Chrome DevTools，切换到Sources面板。
在你想设置断点的行号上右键点击。
选择“Add Conditional Breakpoint…”。
输入一个JavaScript表达式作为条件。只有当这个表达式的值为true时，断点才会触发。

3. Conditional Breakpoints的实际应用案例

在循环中只在特定条件下暂停： 比如，你有一个循环遍历一个数组，你只想在数组的某个特定元素上暂停。
```
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  // 设置条件断点：i === 3
  console.log(arr[i]);
}
```
在这个例子中，只有当i等于3时，断点才会触发。
在递归函数中只在特定条件下暂停： 比如，你有一个递归函数，你只想在递归的深度达到某个值时暂停。
```
function factorial(n) {
  // 设置条件断点：n === 3
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

factorial(5);
```
在这个例子中，只有当n等于3时，断点才会触发。
在事件处理函数中只在特定条件下暂停： 比如，你有一个事件处理函数，你只想在某个特定的事件发生时暂停。
```
document.getElementById('myButton').addEventListener('click', function(event) {
  // 设置条件断点：event.target.id === 'myButton'
  console.log('Button clicked!');
});
```
在这个例子中，只有当点击的按钮的id为myButton时，断点才会触发。
复杂条件： 你可以使用任何有效的JavaScript表达式作为条件。例如，你可以使用逻辑运算符、比较运算符、函数调用等。
```
let user = {
    id: 123,
    name: "Alice",
    age: 30,
    isActive: true
};

function processUser(user) {
    // Conditional Breakpoint: user.age > 25 && user.isActive
    console.log(`Processing user: ${user.name}`);
}

processUser(user);
```
在这个例子中，只有当user.age大于25并且user.isActive为true时，断点才会触发。

4. Conditional Breakpoints的注意事项

条件表达式必须是有效的JavaScript表达式。
条件表达式的值必须是布尔值（true或false）。
条件表达式可以在断点所在的作用域内访问任何变量。
条件表达式的计算可能会影响程序的性能，所以不要使用过于复杂的表达式。
如果条件表达式抛出异常，断点将不会触发。
如果条件表达式中使用了全局变量，并且全局变量的值发生了变化，断点的行为可能会变得不可预测。

表格总结：Blackboxing vs. Conditional Breakpoints

特性	Blackboxing	Conditional Breakpoints
目的	忽略不关心的代码，简化调试流程	在特定条件下暂停，精确控制断点的行为
作用对象	文件或文件夹	代码行
配置方式	右键点击文件/文件夹，或在Settings面板配置	在行号上右键点击，输入条件表达式
效果	跳过被Blackboxed的代码	只有当条件满足时才触发断点
适用场景	调试第三方库、框架、构建工具生成的代码等	在循环、递归、事件处理函数等需要特定条件暂停的场景
注意事项	不影响代码执行，只是忽略调试	条件表达式必须有效，可能会影响性能

第三部分：Blackboxing和Conditional Breakpoints的结合使用

这两个工具单独使用已经很强大了，但如果把它们结合起来使用，简直就是如虎添翼！

想象一下，你正在调试一个使用了第三方库的复杂组件。你已经Blackbox了第三方库的代码，但你仍然需要在你的组件的某个循环里设置断点，并且只想在特定条件下暂停。这时候，你可以先Blackbox第三方库的代码，然后在你的组件的代码里设置Conditional Breakpoints。这样，你就可以专注于你的组件的逻辑，而不用被第三方库的代码所干扰，同时又能精确地控制断点的行为。

代码示例：

假设你使用了 Lodash 的 _.map 函数，并且你只想在处理某个特定元素时暂停。

import _ from 'lodash';

function processData(data) {
  // 假设 data 是一个数组，你想在处理特定 id 的元素时暂停
  const processedData = _.map(data, item => {
    // 设置条件断点：item.id === 5
    console.log(`Processing item with id: ${item.id}`);
    return { ...item, processed: true };
  });

  return processedData;
}

const data = [
  { id: 1, value: 'A' },
  { id: 5, value: 'B' },
  { id: 10, value: 'C' }
];

processData(data);

你可以 Blackbox node_modules/lodash/lodash.js，然后在 console.log 那一行设置条件断点 item.id === 5。这样，你就可以忽略 Lodash 的内部实现，只在你关心的特定元素上暂停。

总结：

Blackboxing和Conditional Breakpoints是Chrome DevTools里两个非常实用的工具，可以帮助你更高效地调试复杂的代码。掌握它们，你就可以像一个经验丰富的猎人一样，在代码丛林里精准地找到你的目标，而不会迷失方向。记住，调试不仅仅是找到bug，更重要的是理解代码的运行方式，提升你的编程能力。

希望今天的讲解对大家有所帮助！祝大家编程愉快，bug永不相见！ (当然，这只是美好的祝愿，bug肯定还会有的，但至少你可以更高效地解决它们了！)

发表回复 取消回复

发表回复取消回复