Stop Chrome debugger from showing other scripts

Question

Using chrome debugger I am often whisked away to different files such as JQuery or Google Ad Manager, which is quite frustrating when I am trying to debug a single file.

If I'm not interested in how these libraries are affecting the script I am trying to debug, is there a way to prevent them from showing up at all? I would think that the step over functionality would prevent different scopes from opening, but I suppose that's just for new scopes spawned from the inspected function...

Answer 1

If you are using chrome for debugging you can achieve it by black-boxing the scripts. Two ways you can do it.

Using the Settings panel

• Right-clicking on any script in the Sources panel
• Settings panel

Use the Settings panel to configure blackboxed scripts. Open the DevTools Settings and under Sources click

This will open up a dialog where you can input file names of scripts that you would like to add to the blacklist. You can do this a couple of ways:

• enter the name of a file,
• use regular expressions to target:
• files that contain a specific name /backbone.js$,
• certain types of files like .min.js$ or enter in an entire folder that contains scripts you want to blackbox such as bower_components.

Context menus

To use the Settings panel for adding files to the blacklist, you can use the context menu when working in the Sources panel. When viewing a file you can right-click in the editor. And you can right-click on a file in the file navigator. From there choose Blackbox Script. This will add the file to the list in the Settings panel.

Source: https://developer.chrome.com/devtools/docs/blackboxing