Is there a way to hide 3rd party JS function calls in stack trace in chrome or firebox debugger?

Question

This is one of my pet issues w/ Chrome debugger. I have a function that calls 3rd-party library that internally calls 20 other functions and the 20th library function again calls another function in my library.

MyFunctionA()

-> calls libFunctionA()

-> calls libFunctionB()

...

-> calls libFunctionZ()

->calls MyFunctionB() {debugger;}

If I put a debugger in MyFunctionB, I see stack trace like below:

1. MyFunctionB
2. libFunctionZ
3. libFunctionY
4. libFunctionX
5. ...
6. ...
7. MyFunctionA

I want to hide all the libFunctions(X,Y, Z etc..) so I can easily see only my libraries functions in the stack like below:

1. MyFunctionB
2. ..hidden library functions..
3. MyFunctionA

Is there any way to do this in either Chrome or Firefox debuggers?

Missioner

Answer 1

you can blacklist those scripts which you dont want to see.

steps:

• Method 1:

  1. click on a file in the call stack, which you wish to blacklist.
  2. right click on source code of that and select "blacklist source"

• Method 2: you can blackbox complete folder or files in settings > Blackboxing, using a pattern

Next time: When paused on a breakpoint, in the call stack you will see a message stating the number of frames which are blackboxed. You can show these frames if you want, but since they are calls made from a blackboxed script they are hidden unless you click show.

Kenna

Answer 2

You can hide all the non-relevant stack trace lines in Chrome + Webpack by adding

webpack:///./node_modules

To the list of blacklisted source in Chrome Dev Tools Settings.

This is what the traces look like after:

Special thanks to other posters @Shishir Arora + @str

Untutored

it's probably just something specific to my webpack setup, but in case anyone has the same problem, tweaking that regex to be a more little forgiving works wonders.. webpack://.*/node_modules – Escape

Answer 3

Mozilla just announced that this feature was built into Firefox 58 Developer Edition. This most likely means that it also will be available in Firefox 58.

Similarly, the debugger can recognize two dozen common JavaScript libraries and group their stack frames in the call stack. This makes it easy to separate the code you wrote from code provided by a framework when you’re tracking down a bug:

Dilapidate

Answer 4

Since Chrome 106, it is possible to ignore known third-party scripts.

Go to Dev Tools Settings > Ignore list > Check Automatically add known third-party scripts to ignore list.

Chrome 106 What’s New in DevTools:

• Article
• Video

With the Automatically add known third-party scripts to ignore list setting, the call stack now shows only frames that are relevant to your code.

To view all frames, enable Show ignore-listed frames. Previously, DevTools displayed all frames by default.

If a script is not ignored automatically, you can add it to the ignored list. In the call stack, right-click on it and select "Add script to ignore list".

Sulphurous