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?

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.

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

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: