JS `Chrome DevTools` `Blackboxing`：忽略第三方库代码，聚焦核心逻辑

各位靓仔靓女，晚上好！我是今晚的讲师，很高兴能和大家一起聊聊 Chrome DevTools 里那个低调又强大的功能：Blackboxing。它就像一个代码世界的“黑名单”，能帮我们过滤掉那些烦人的第三方库代码，让我们更专注于核心逻辑，就像在茫茫人海中一眼锁定你的女神/男神一样。

开场白：为什么要 Blackboxing？

作为一个前端开发者，你的日常可能是这样的：

npm install 一大堆依赖包。
遇到 bug，开始疯狂 console.log。
然后发现，控制台被各种第三方库的输出刷屏，根本找不到自己的代码！

或者，你可能遇到过这样的情况：

在 DevTools 里调试代码，一步一步往下走。
突然跳进了 jQuery 或者 React 的源码里，迷失在各种复杂的函数调用中，怀疑人生。

这时候，你就需要 Blackboxing 出马了！它可以让你：

减少调试时的干扰： 让 DevTools 自动跳过被 Blackbox 的代码，直接进入你的核心逻辑。
提高控制台的可读性： 过滤掉第三方库的 console.log，让控制台只显示你关心的信息。
简化断点调试： 避免在第三方库的代码中设置断点，提高调试效率。

简单来说，Blackboxing 就是一个“降噪”工具，帮你屏蔽干扰，专注于关键信息。

Blackboxing 的基本用法

Blackboxing 的使用非常简单，主要有两种方式：

通过 DevTools 界面： 这是最直观的方式。
通过 Source Maps： 这种方式更灵活，可以批量 Blackbox 文件。

1. 通过 DevTools 界面 Blackbox 文件

步骤 1：打开 DevTools。 (废话，但还是要说一下，万一有人不知道呢？)
步骤 2：打开 Sources 面板。 在 DevTools 顶部找到 "Sources" 选项卡，点击进入。
步骤 3：找到你想 Blackbox 的文件。 在 Sources 面板的左侧，你应该能看到你的项目文件结构。找到那些你想忽略的第三方库文件。
步骤 4：右键点击文件，选择 "Blackbox Script"。 恭喜你，这个文件已经被加入了黑名单！

现在，当你调试代码时，DevTools 会自动跳过这个文件里的代码。如果你在这个文件里设置了断点，调试器也会忽略它们。

示例：Blackbox 一个简单的库

假设你的项目里用到了一个名为 helper.js 的第三方库，你想 Blackbox 它。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Blackboxing Demo</title>
</head>
<body>
  <script src="helper.js"></script>
  <script src="app.js"></script>
</body>
</html>

// helper.js
function helperFunction() {
  console.log("This is from helper.js");
  return "Helper result";
}

// app.js
function main() {
  console.log("Starting main function");
  let result = helperFunction();
  console.log("Helper result:", result);
  console.log("Ending main function");
}

main();

在 Sources 面板里找到 helper.js 文件。
右键点击 helper.js，选择 "Blackbox Script"。

现在刷新页面，你会发现控制台只显示 app.js 里的 console.log 输出，helper.js 里的 console.log 被过滤掉了。

2. 通过 Source Maps Blackbox 文件

Source Maps 是一种将编译后的代码映射回原始源代码的技术。很多构建工具 (例如 Webpack, Parcel, Rollup) 都会生成 Source Maps。

通过 Source Maps Blackbox 文件，你可以更方便地批量 Blackbox 文件，特别是那些经过混淆和压缩的第三方库。

步骤 1：确保你的项目生成了 Source Maps。
步骤 2：打开 DevTools Settings。 点击 DevTools 右上角的三个点，选择 "Settings"。
步骤 3：进入 "Ignore List" 选项卡。 在 Settings 窗口的左侧，找到 "Ignore List" 选项卡，点击进入。
步骤 4：添加 Blackbox 模式。 在 "Blackbox patterns" 区域，你可以添加一个或多个正则表达式，用于匹配你想 Blackbox 的文件路径。

示例：使用正则表达式 Blackbox 多个文件

假设你的项目里有以下文件：

node_modules/library-a/dist/library-a.min.js
node_modules/library-b/dist/library-b.min.js
vendor/utils.js

你想 Blackbox 所有 node_modules 目录下的 .min.js 文件，以及 vendor/utils.js 文件。

你可以在 "Blackbox patterns" 里添加以下正则表达式：

node_modules/.*.min.js$
vendor/utils.js$

node_modules/.*.min.js$：这个正则表达式匹配 node_modules 目录下任何以 .min.js 结尾的文件。
vendor/utils.js$：这个正则表达式匹配 vendor/utils.js 文件。注意 . 需要转义。

添加完正则表达式后，DevTools 会自动 Blackbox 匹配到的文件。

Blackbox 的高级用法

除了基本的 Blackbox 功能，DevTools 还提供了一些高级用法，可以让你更灵活地控制 Blackbox 的行为。

禁用 Blackbox： 有时候你可能需要临时禁用 Blackbox，例如当你需要调试第三方库的代码时。你可以在 DevTools Settings 的 "Ignore List" 选项卡里，取消勾选 "Enable ignore listing"。
自定义 Blackbox 行为： 你可以通过 DevTools API 自定义 Blackbox 的行为，例如在 Blackbox 的代码里添加特殊的注释，让 DevTools 识别并跳过它们。

Blackbox 的最佳实践

只 Blackbox 必要的代码： 不要过度 Blackbox，只 Blackbox 那些你确定不需要调试的第三方库代码。
定期检查 Blackbox 规则： 随着项目的迭代，你的依赖包可能会发生变化。定期检查你的 Blackbox 规则，确保它们仍然有效。
使用 Source Maps： 如果你的项目使用了构建工具，务必生成 Source Maps。Source Maps 可以让你更方便地 Blackbox 文件，并且可以提高调试效率。

Blackbox 的常见问题

Blackbox 不生效： 可能是因为你的 Blackbox 规则不正确，或者你的 Source Maps 没有正确生成。检查你的正则表达式，确保它们能正确匹配你想 Blackbox 的文件。同时，确保你的构建工具正确生成了 Source Maps，并且 DevTools 能够找到它们。
Blackbox 导致调试卡顿： 有时候 Blackbox 可能会导致调试卡顿，特别是在 Blackbox 了大量文件的情况下。尝试减少 Blackbox 的文件数量，或者优化你的 Blackbox 规则。

Blackboxing 和 Ignore List 的区别

在 DevTools 中，"Blackboxing" 和 "Ignore List" 经常被混淆，它们都用于排除某些代码，但它们的工作方式和用途略有不同。

特性	Blackboxing	Ignore List
主要用途	调试时跳过第三方库代码，专注于核心逻辑。	隐藏来自控制台的消息，例如框架的警告或错误，或者隐藏不相关的资源（例如图片、字体）。
工作方式	在调试器中跳过指定的文件或模式。	过滤控制台输出和网络请求。
影响范围	调试器，控制台 (部分影响)	控制台，网络面板 (部分影响调试器)
使用场景	调试代码时，避免进入第三方库的细节。	减少控制台的噪音，只显示你关心的信息。
配置方式	右键文件选择"Blackbox Script" 或在 Settings 中配置模式。	在 Settings 中配置模式。

简单来说：

Blackboxing 主要用于提升调试体验，让调试器专注于你的代码。
Ignore List 主要用于清理控制台和网络面板，减少不必要的干扰。

虽然它们的功能有所重叠，但它们的应用场景和侧重点是不同的。你可以根据自己的需求选择使用哪种方式，或者同时使用它们。

代码示例：更复杂的 Blackbox 场景

假设你的项目结构如下：

- src/
  - components/
    - Button.js
    - Input.js
  - utils/
    - api.js
  - app.js
- node_modules/
  - react/
    - dist/
      - react.min.js
  - lodash/
    - lodash.min.js

你想 Blackbox 以下内容：

所有 node_modules 目录下的 .min.js 文件。
src/utils/api.js 文件 (因为你觉得它已经很稳定了，不需要调试)。

你可以在 DevTools Settings 的 "Ignore List" 选项卡里添加以下正则表达式：

node_modules/.*.min.js$
src/utils/api.js$

现在，当你调试 src/components/Button.js 或者 src/app.js 时，DevTools 会自动跳过 node_modules 目录下的 .min.js 文件和 src/utils/api.js 里的代码。

结论

Blackboxing 是 Chrome DevTools 里一个非常实用的功能，它可以帮助你减少调试时的干扰，提高效率，让你更专注于核心逻辑。希望通过今天的讲解，你已经掌握了 Blackboxing 的基本用法和高级技巧。

记住，Blackboxing 就像一把瑞士军刀，用好了能让你事半功倍。但是，不要过度使用，否则可能会适得其反。

好了，今天的讲座就到这里。感谢大家的聆听！如果大家有问题，欢迎提问，我们一起讨论。祝大家编码愉快，bug 越来越少！

发表回复 取消回复

发表回复取消回复