Black-boxing script option in Chrome Developer tool

Question

I have an issue with the Chrome developer tool.
My version is Version 46.0.2490.71 (64-bit)
According to online tutorials, I can go to Sources tab, right-click a script file and there will be Blackbox Script option to choose.
However, I see no option in my chrome. How do I enable that option since I have no knowledge about regex?

---

Another problem: The scripts still got debugged even though I added them to blackbox list. Weird!!

---

One more thing i want to ask is how I blackbox an "unlimited" amount of VM files?

Stavropol

Sounds stupid, but I just figured out a way to kip those VM files. I just need to have multiple breakpoints in the source file that I want to debug. – Stavropol

Answer 1

1. Open devtools settings (press F1 once in devtools or open from the menu)

2. Go to blackboxing (see image below)

3. Add a pattern, for example:

   • node_modules
   • angular
   • rxjs

It uses regex syntax in case you need something more specific.

The nice part about blackboxing library/framework scripts is that it makes it easier to see in stacktraces from where the error was triggered in your own sources.

EDIT

As other pointed out, since this answer was posted you can directly blackbox a script with a right click on the source file in devtools. However head off to the blackboxing settings UI for more control.

Shorten

I don't know Regex, so I cannot manually input the file name there. – Stavropol

If you want to blackbox angular scripts as the one on your screenshot, then angular.*\.js should suffice. In case you need more than that, there are a lot of questions about regex on SO, or you can open a new one if you don't find the answer. Consider closing this one as it is about blackboxing a script in Chrome and not about regex. – Shorten

This option is missing in my Chrome 54 – Patagonia

This no longer seems to exist – Grimbal

The user interface changed, I updated the answer. Thanks for noticing. – Shorten

just click the mouse right button anywhere within the opened script file in the source tab and select "blackbox script" – Anodic

Answer 2

There's an easier way in Chrome 60 (and possibly older):

• Open the source file in Chrome dev tools (in the source tab)
• Right Click the column that displays the line numbers
• Select "Blackbox Script"

EDIT: As svict4 pointed out, in Chrome 64, you can also right click anywhere on the script

Refer

On Version 64.0, Right clicking the line numbers did not bring up "Blackbox Script", but right clicking anywhere on the code itself presented that option. – Whitsun

@Whitsun Thanks, looks like you're right about clicking anywhere. For me (on Mac), the sidebar still works as well. – Refer

As of Chrome 102 (2022), seems to be back in the line-number column, and is now called "Add script to ignore list." (Seems like, from this post, it moves around a lot...) – Veto

Answer 3

• It seems they changed from blackbox to Ignore List.

• Also press f1 in devTools and find Ignore List

Braeunig

Answer 4

Not sure if Chrome has changed too, but on Chromium Edge, the option is named "Mark as Library Code" and "Mark as my Code" to disable it. You have to right click on the code and not on the file/tab. Right clicking on Line numbers works too.

Kaolin

Answer 5

1. Open DevTools,
2. Find the VM##### file stopping the execution,
3. Add a breakpoint to the debugger; statement,
4. Edit the breakpoint and simply add false to the condition

Should work in any version of any chromium based browser.

Insuppressible