有没有办法在Chrome或Firebox调试器的堆栈跟踪中隐藏第三方JS函数调用？

Question

这是我带有Chrome调试器的小问题之一。我有一个函数，该函数调用3rd-party库，该函数内部调用其他20个函数，而第20个库函数再次调用我库中的另一个函数。

MyFunctionA（）

->调用libFunctionA（）

->调用libFunctionB（）

...

->调用libFunctionZ（）

->调用MyFunctionB（）{debugger;}

如果将调试器放入MyFunctionB中，则会看到如下所示的堆栈跟踪：

1. MyFunctionB
2. libFunctionZ
3. libFunctionY
4. libFunctionX
5. ...
6. ...
7. 我的功能

我想隐藏所有的libFunctions（X，Y，Z等。），这样我就可以轻松地在堆栈中仅看到我的库函数，如下所示：

1. MyFunctionB
2. ..隐藏的库函数..
3. 我的功能

Chrome或Firefox调试器中有什么方法可以做到这一点？

Answer 1

您可以将不想看到的脚本列入黑名单。

脚步：

• 方法1：

  1. 在调用堆栈中单击要添加到黑名单的文件。
  2. 右键单击该源代码，然后选择“黑名单源”

• 方法2：您可以使用模式在设置>黑匣子中对完整的文件夹或文件进行黑箱

下次：在断点处暂停时，在调用堆栈中，您将看到一条消息，指出被黑框显示的帧数。您可以根据需要显示这些框架，但是由于它们是由黑盒脚本发出的调用，因此除非单击“显示”，否则它们将被隐藏。

Answer 2

您可以通过添加隐藏 Chrome + Webpack 中所有不相关的堆栈跟踪行

webpack:///./node_modules

前往 Chrome 开发工具设置中的黑名单源列表。

这就是痕迹之后的样子：

特别感谢其他海报@Shishir Arora + @str