Chrome DevTools Tip: Blackboxing Scripts

The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained in that file.

A typical example would be to blackbox the script of the JS framework you are using: jQuery, React, etc.

devtools-blackbox-2

You can blacklist JavaScript source files via the DevTools Settings:

add-pattern

How to step through your code | Web Tools – Google Developers →

Note: the previous version of the docs are more clear than the current version (linked above) — Blackbox JavaScript Source Files – Google Chrome →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.