有没有办法在 chrome 或 firebox 调试器的堆栈跟踪中隐藏第 3 方 JS 函数调用？答案

【问题标题】：Is there a way to hide 3rd party JS function calls in stack trace in chrome or firebox debugger?有没有办法在 chrome 或 firebox 调试器的堆栈跟踪中隐藏第 3 方 JS 函数调用？
【发布时间】：2018-02-10 00:16:42
【问题描述】：

这是我使用 Chrome 调试器时最关心的问题之一。我有一个调用第 3 方库的函数，该库在内部调用 20 个其他函数，第 20 个库函数再次调用我库中的另一个函数。

MyFunctionA()

-> 调用 libFunctionA()

-> 调用 libFunctionB()

...

-> 调用 libFunctionZ()

->调用 MyFunctionB() {debugger;}

如果我在 MyFunctionB 中放置一个调试器，我会看到如下堆栈跟踪：

MyFunctionB
libFunctionZ
libFunctionY
libFunctionX
...
...
我的函数A

我想隐藏所有的 libFunctions(X,Y, Z etc..)，这样我就可以很容易地在堆栈中只看到我的库函数，如下所示：

MyFunctionB
..隐藏库函数..
我的函数A

有没有办法在 Chrome 或 Firefox 调试器中执行此操作？

【问题讨论】：

标签： javascript jquery debugging google-chrome-devtools

【解决方案1】：

你可以blacklist那些你不想看到的脚本。

步骤：

方法一：
1. 单击调用堆栈中您希望将其列入黑名单的文件。
2. 右键单击该源代码并选择“黑名单源”
方法2：可以在设置中对整个文件夹或文件进行黑盒化 > 黑盒化，使用模式

下一次：在断点处暂停时，在调用堆栈中你会看到一个说明被黑盒化的帧数的消息。您可以根据需要显示这些帧，但由于它们是从黑盒脚本中调用的，因此除非您单击显示，否则它们会被隐藏。

【讨论】：

【解决方案2】：

Mozilla 刚刚宣布 this feature was built into Firefox 58 Developer Edition。这很可能意味着它也将在 Firefox 58 中可用。

同样，调试器可以识别两打常见的 JavaScript 库，并将它们的堆栈帧分组到调用堆栈中。当您跟踪错误时，这可以很容易地将您编写的代码与框架提供的代码分开：

【讨论】：

【解决方案3】：

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

webpack:///./node_modules

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

这是跟踪后的样子：

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

【讨论】：