Debugging with Console

window.console writes to the DevTools Console, which Ctrl+Shift+J (Cmd+Option+J on a Mac) opens in Chrome 1 . Console and Sources tours the panel and the common methods (log(), warn(), table(), group(), time(), assert()). Wrap variables in braces so each value carries its name, and count with labels.

Self-describing logs and labeled countersJavaScript

const height = 168;
const weight = 65;
console.log(height, weight);               // which number is which?
console.log({ height, weight });           // shorthand for { height: height, weight: weight }
console.count('retry');
console.count('retry');                    // counts per label; countReset('retry') restarts

Output

168 65
{height: 168, weight: 65}
retry: 1
retry: 2

console.dir(el) lists an element's properties where log() shows its markup, console.trace() prints the call stack, and console.timeLog(label) reads a timer without stopping it. Strip debug logging from production builds, for example with esbuild 126 's --drop:console.

MENU