Chrome 开发者工具中的黑盒脚本选项答案

【问题标题】：Black-boxing script option in Chrome Developer toolChrome 开发者工具中的黑盒脚本选项
【发布时间】：2022-01-14 05:46:35
【问题描述】：

我对 Chrome 开发者工具有疑问。
我的版本是Version 46.0.2490.71 (64-bit)
根据在线教程，我可以转到 Sources 选项卡，右键单击脚本文件，将有Blackbox Script 选项可供选择。
但是，我在我的 chrome 中看不到任何选项。由于我对正则表达式一无所知，如何启用该选项？

另一个问题：即使我将它们添加到黑盒列表中，脚本仍然可以调试。诡异的！！

我还想问的一件事是我如何黑盒“无限”数量的 VM 文件？

【问题讨论】：

听起来很愚蠢，但我只是想出了一种方法来跳过那些 VM 文件。我只需要在要调试的源文件中有多个断点。

标签： google-chrome google-chrome-devtools

【解决方案1】：

打开 devtools 设置（在 devtools 中按 F1 一次或从菜单中打开）
转到 blackboxing（见下图）
添加模式，例如：
- node_modules
- angular
- rxjs

如果您需要更具体的内容，它会使用正则表达式语法。

黑盒库/框架脚本的好处在于，它可以更容易地在堆栈跟踪中查看错误触发的位置在您自己的源中。

编辑

正如其他人指出的那样，由于已发布此答案，因此您可以通过右键单击 devtools 中的源文件直接将脚本黑箱化。但是，请前往黑盒设置 UI 以获得更多控制。

【讨论】：

我不懂正则表达式，所以无法在此处手动输入文件名。
如果您想将黑盒角脚本作为屏幕截图中的脚本，那么angular.*\.js 就足够了。如果您需要更多，关于 SO 上的正则表达式有很多问题，或者如果您没有找到答案，您可以打开一个新问题。考虑关闭这个，因为它是关于在 Chrome 中对脚本进行黑盒化，而不是关于正则表达式。
我的 Chrome 54 中缺少此选项
这似乎不再存在
用户界面变了，我更新了答案。感谢您的关注。

【解决方案2】：

在 Chrome 60（可能更早版本）中有一种更简单的方法：

在 Chrome 开发工具中打开源文件（在源选项卡中）
右键单击显示行号的列
选择“黑盒脚本”

编辑：正如 svict4 指出的，在 Chrome 64 中，您还可以右键单击脚本上的任意位置

【讨论】：

在版本 64.0 上，右键单击行号不会显示“黑盒脚本”，但右键单击代码本身的任何位置都会显示该选项。
@svict4 谢谢，看来您点击任意位置是对的。对我来说（在 Mac 上），侧边栏仍然可以正常工作。

【解决方案3】：

好像他们从blackbox变成了Ignore List。

也在 devTools 中按 f1 并找到 Ignore List

【讨论】：

【解决方案4】：

不确定 Chrome 是否也发生了变化，但在 Chromium Edge 上，该选项被命名为“标记为库代码”和“标记为我的代码”以禁用它。您必须右键单击代码而不是文件/选项卡。右键单击行号也可以。

【讨论】：