Master Chrome Console: Essential Debugging Techniques and Commands

This article introduces the most useful Chrome DevTools console capabilities for front‑end developers.

Basic Output

The console.log method prints messages, while other methods include: console.error("message") – error output console.info("message") – informational output console.warn("message") – warning output console.debug("message") – debug output console.clear() – clears the console

Formatted and Styled Output

Console supports printf‑style placeholders and CSS styling:

console.log("%s year", 2016); // %s = string
console.log("%d month", 11);   // %d = integer
console.log("%f", 3.14159);   // %f = float
console.log("%o", console);   // %o = object
console.log("%c custom style", "font-size:30px;color:#00f");
console.log("%c first %c second", "font-size:20px;color:green", "font-size:10px;color:red");

DOM and Object Inspection

Use console.dirxml(element) for a tree view of a DOM node and console.dir(object) to list an object's own properties. For collections, console.table(array) displays a tabular view.

Grouped Output

console.group("start");
console.log("sub1");
console.log("sub2");
console.groupEnd("end");

Debugging Controls

The debugger statement triggers a breakpoint. Chrome’s Sources panel offers breakpoints, step over/into/out, pause/resume, and XHR/DOM breakpoints.

Performance Analysis

console.profile();
// code to measure
console.profileEnd();

Timing can be measured with console.time() and console.timeEnd(). Counting function calls uses console.count("label"), and console.trace() prints the call stack.

Assertions

console.assert(true, "I am wrong");
console.assert(false, "I really am wrong");

Useful Shortcuts

Ctrl+O / Cmd+O – jump to line/column in Sources

Ctrl+F / Cmd+F – search in the current panel

$0, $1, $2 – reference the last three selected DOM elements

debug(fn) – add a breakpoint to a function

Snippets – save reusable code fragments

Pretty‑Print button – format minified source

Copy Response in Network – quickly copy server responses

Device Mode – test media queries and sensor simulations

Force Element State – trigger CSS pseudo‑classes

Best Practices

When logging reference types (objects/arrays), be aware that the console shows a snapshot at the time of inspection; use watch expressions for primitive values and prefer source maps for debugging compiled code.

Author: Faremax – Source: https://segmentfault.com/a/1190000016256731