在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略

在 Chrome 开发者工具中，Call stack 中的 frames 确实可以由开发人员进行配置，这允许他们根据需要隐藏或显示特定的库或框架的调用帧。这种配置通常是通过 blackboxing 脚本实现的。Blackboxing 是一个功能，允许开发者将选定的脚本标记为 “黑盒”，在调试时这些脚本的内部调用不会显示在 Call stack 中，即便它们是当前执行流的一部分。下面我会详细说明如何配置这些 frames，并通过实例展示其使用方式和好处。

Blackboxing 脚本功能介绍

定义和目的

Blackboxing 脚本是一个强大的功能，它使开发者能够指定哪些文件或模式应该在调试过程中被忽略。这对于那些使用了大量第三方库或复杂框架的应用程序尤为重要。通过将这些第三方代码标记为黑盒，开发者可以减少调试中的干扰，从而更快地定位和解决自己代码中的问题。

配置方式

在 Chrome 开发者工具中配置 blackboxing 的方法是：

1. 打开 Chrome 开发者工具，转到 Sources 面板。
2. 在文件资源树中，找到你想要 blackbox 的脚本文件。
3. 右键点击文件名，选择 Blackbox script 选项。
4. 之后，该脚本的调用将不会显示在 Call stack 中。

另外，还可以通过设置来指定模式匹配的脚本进行 blackboxing：

1. 打开开发者工具，点击 Settings（设置图标或按 F1）。
2. 滚动到 Blackboxing 部分。
3. 在 Add pattern 输入框中输入文件模式（如 *.min.js），然后点击 Add。
4. 这样，所有匹配该模式的脚本在调试时都会被忽略。

优点和限制

使用 blackboxing 功能的优点包括更清晰的调试视图和更高的调试效率。但它也有限制，比如可能会忽略掉一些实际影响应用行为的第三方代码问题，因此在使用时需要谨慎考虑。

使用实例

假设你正在开发一个使用 React 和 D3.js 的数据可视化应用。React 负责 UI 组件的渲染，而 D3.js 用于生成复杂的图表。当出现一个与图表交互有关的错误时，调试时可能会看到大量 D3.js 的内部函数调用。这时，你可以选择将 D3.js 相关的脚本进行 blackboxing，以便更直接地查看和处理与 React 组件交互的部分。

建议和最佳实践

为了最大化利用 blackboxing 功能带来的好处，开发者应该：

• 仔细选择哪些脚本进行 blackboxing。理想的情况下，只有那些确定不会直接影响调试问题的第三方库或框架才应该被标记。
• 定期复查和更新黑盒配置。随着项目依赖的更新和代码的变更，原有的黑盒配置可能不再适用，需要调整。
• 结合使用 Show ignore-listed frames。在某些情况下，如果需要临时查看某些已被 blackbox 的代码的调用情况，可以利用 Show ignore-listed frames 选项来临时显示

这些 frames。

通过上述方法，开发者可以有效地管理和控制在 JavaScript 调试过程中的视图复杂性，从而提升开发效率和准确性。而 blackboxing 和 Show ignore-listed frames 的结合使用，提供了一个灵活的解决方案来应对日常开发中遇到的各种调试挑战。