如何调试单个JS文件

Question

我的项目中有很多JS文件，其中一些是外部库。我想知道为当前用户交互执行了哪些JS代码。我已经像这里描述的那样在 Chrome 上设置了断点。但已经有很多JS文件，并且许多是由Visual Studio自己添加的。因此，对我来说很难找到精确的代码。所以在这种情况下，我需要一些能够使我仅调试xyz.js文件的东西。

- Imad

Answer 1

在Chrome DevTools中打开设置，单击“Blackboxing”或可能为“Manage framework blackboxing”，并设置文件名或正则表达式模式。任何与此匹配的脚本都将在您通过自己的代码进行步进并到达输入该脚本的点时不会被调试。

- adamtickner

Answer 2

根据adamtickner在这里的解释，以下是详细描述。假设你想要调试的文件名为“src/app.js”。

在Chrome浏览器中按F12打开调试器，然后点击设置（齿轮图标⚙，位于窗口右上角）。选择“忽略列表”菜单项。

到目前为止还容易理解。棘手的部分是添加正确的正则表达式。我们需要一个表示“除...之外的所有内容”的表达式。这可以通过一种称为“负向先行断言”的技术来实现。

我们的正向表达式将是：

src\/app\.js

我们刚刚避开了斜杠和点号，因为它们是保留的正则表达式字符。

现在，使用负向先行断言，我们的表达式应该像这样：

^((?!src\/app\.js).)*$

这个表达式可以找到任何不包含我们文件路径的内容。您可以使用regex101测试它。将此模式添加到您的忽略列表中，您就完成了！在调试此文件时，Chrome可能会显示一个误导性消息，例如“此脚本在调试器的忽略列表中”-请忽略此消息。

- ESP32