Unlock Hidden Chrome DevTools Tricks to Supercharge Your Debugging

Getting Started with Chrome DevTools

Use the Canary build of Chrome to access the newest DevTools features. Enable Developer Tools experiments by navigating to chrome://flags, turning on the flag, and then opening the Experiments tab in DevTools settings. Experimental features become available there.

Console Mastery

Object logging : Wrap a variable in an object literal – e.g. console.log({myVar}) – to display both the name and value.

Tabular data : Use console.table(arrayOfObjects) to render arrays of objects as a readable table.

Styled output : Apply CSS with console.log('%c message', 'color: red; font-weight: bold;') to highlight logs.

DOM shortcuts : $('selector') returns the first matching element; $$('selector') returns an array‑like list that supports map, filter, etc. Example to verify all links:

Promise.all(
  $$('a')
    .map(link => link.href)
    .map(href => fetch(href))
).then(() => console.log('All links working'))
 .catch(() => console.error('Some links are broken'));

Element shortcuts : $0 – $4 reference the last five elements selected in the Elements panel.

Last result : $_ returns the value of the most recent expression.

Event listeners : getEventListeners(node) lists all listeners attached to a DOM node.

Agile evaluation (Canary) : The console evaluates expressions as you type, without pressing Enter.

Function debugger : debug(fn) inserts a breakpoint at the start of fn.

Copy utility : copy(value) copies the argument to the clipboard and pretty‑prints JSON.

Top‑level await : Recent DevTools versions allow await directly in the console.

Resources (Sources) Panel Techniques

Auto‑pretty‑print : In Canary, enable the Experimental option to automatically format minified scripts.

Conditional breakpoints : Add a JavaScript expression to a breakpoint so execution pauses only when the condition evaluates to true.

Hover inspection : Pause script execution, hover over an element to reveal a tooltip, then select the element in the Elements panel.

XHR breakpoints : Set breakpoints on XHR/fetch requests to identify which code triggers network calls.

DevTools as an IDE : Drag a project folder (e.g., a create‑react‑app or vue‑cli project) into the Sources panel. Files can be edited in‑place with live updates reflected in the browser.

Network overrides : Map remote resources to local files, edit them on the fly, and have the browser serve the overridden version without changing the server.

Debugging Node.js and Tests

Start a Node.js process with the inspector enabled: node --inspect-brk script.js Open chrome://inspect in Chrome to attach DevTools to the process.

For Jest tests, run: node --inspect-brk ./node_modules/.bin/jest Alternatively, use the ndb tool (https://github.com/GoogleChromeLabs/ndb) which launches Chrome DevTools with Node debugging pre‑configured:

ndb npx jest

ndb npm run unit

Reusable Code Snippets

Snippets can be saved in the Sources → Snippets panel and executed on any page.

Inject Lodash at runtime :

(function () {
  'use strict';
  var script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js';
  script.type = 'text/javascript';
  document.head.appendChild(script);
})();

Trace property access and mutation :

const traceProperty = (obj, prop) => {
  let value = obj[prop];
  Object.defineProperty(obj, prop, {
    get() {
      console.trace(`${prop} accessed`);
      return value;
    },
    set(newVal) {
      console.trace(`setting ${prop} to`, newVal);
      value = newVal;
    }
  });
};

Key Takeaways

Chrome DevTools provides a rich set of shortcuts ( $, $$, $0 ‑ $4), console utilities ( console.table, styled logs, copy, top‑level await), and debugging features (conditional breakpoints, XHR breakpoints, Node.js inspection). Leveraging the Sources panel as an editor and using snippets further streamlines the debugging workflow.