Skip to content

Blackboxing Scripts in Chrome DevTools

Jump to bottom
Michael Hulse edited this page Oct 10, 2017 · 2 revisions

There are two ways you can add scripts to the blackbox blacklist:

  1. Using the Settings panel: Right-clicking on any script in the Sources panel Settings panel
  2. Use the Settings panel to configure blackboxed scripts: Open the DevTools Settings and click on the “Blackboxing” tab.

  • ^https:\/\/, basically block any CDN-hosted libraries (greedy, but I’d prefer to be implicit)
  • plugins, I like to put all locally hosted and manually installed libraries/plugins in this directory (when not using a package manager to manage dependencies)
  • \.min\.js$, for all minified sources
  • node_modules and bower_components, for package manager dependencies
  • ~, home, for dependencies in a Webpack bundle
  • bundle.js, it’s a bundle itself (we use sourcemaps, don’t we?)
  • (webpack)-hot-middleware — “Hot Module Replacement”, (HMR) is a feature to inject updated modules into the active runtime.
Clone this wiki locally