bahmutov/code-snippets

Chrome DevTools code snippets - hand little collection of code snippets that can be run inside the chrome devtools console. A little dated for sure, but interesting none the less.

Summary

bahmutov/code-snippets is a JavaScript repository of small scripts that run inside Chrome DevTools' Sources > Snippets panel for performance, debugging, and testing. The collection spans security probes, DOM and CPU profiling, storage measurements, Angular-specific diagnostics, and a few utility scripts. It is licensed under MIT and meant to be loaded directly into DevTools rather than installed as a dependency.

What it is useful for

The snippets target common browser-side investigations where the built-in DevTools UI is too coarse. Performance examples include first-paint.js, which times the interval from page reload to first visible content, time-method-call.js to measure a single method call, profile-method-call.js to record a CPU profile of one call, and css-layout.js, which outlines every DOM element for layout inspection. Storage helpers like local-storage-size.js and expensive-keys.js report how much space individual keys and values occupy, which is useful when quotas are a concern. Security entries include test-script-injection.js, which checks whether a page permits inline script tags, and harlem-shake-xss.js as a visible XSS probe. The Angular group covers digest-cycle diagnostics, such as ng-count-watchers.js, ng-idle-apply-timing.js, and ng-find-expensive-digest.js, which ranks selectors by digest duration. Misc utilities include remove-all-but.js, which strips the page down to a chosen set of CSS selectors.

How engineers can use it

The README does not document an npm install or build step; instead, the workflow is to copy a file's contents into a new snippet in Chrome DevTools' Sources > Snippets pane and run it against the open page. Each file is a self-contained script, so engineers can browse the list, open the source of interest, and paste it. The README also notes a limitation: snippets do not have access to the full console API, for example console.monitor is unavailable, so scripts that depend on those APIs will not work. An update-code-snippets.js script is provided to refresh local copies from the GitHub repository, but the README states the prior nested-DevTools approach no longer works (open issue #23), so readers should consult the issue for the current update path.