Console Methods
console.log is only the most famous member of a much larger API. The console object exposes around twenty methods for logging, grouping, timing, counting and inspecting values. Knowing the right one turns a wall of log output into a structured, scannable diagnostic.
The logging levels
Five methods log at different severity levels. Devtools filter by level, so picking the right one makes problems easier to spot.
console.log— general output. The default level.console.info— informational. Often identical tologvisually, but filterable.console.debug— verbose detail. Hidden by default in some devtools — enable the "Verbose" filter to see it.console.warn— yellow icon, included in the "Warnings" filter. Use for "this works, but it should not".console.error— red icon, captures a stack trace, included in the "Errors" filter. Use for genuine failures.
console.log("user loaded", user.id);
console.info("cache hit");
console.debug("payload", payload);
console.warn("deprecated option:", option);
console.error("failed to save", err);Formatting and substitutions
Console methods accept printf-style format strings. %s is a string, %d/%i an integer, %f a float, %o/%O an object, %c applies CSS to the following text. Most of the time you just pass multiple arguments and the devtools format them sensibly.
console.log("%cBanner", "color: white; background: #333; padding: 2px 6px");
console.log("user %s scored %d", name, score);
console.log("payload:", payload); // simpler — modern devtools format this wellGrouping related logs
console.group (and the collapsed variant) indent every following log until console.groupEnd. Great for tracing a function's internal steps without losing context.
function processOrder(order) {
console.group(`order ${order.id}`);
console.log("items:", order.items.length);
for (const item of order.items) {
console.groupCollapsed(item.sku);
console.log("price", item.price);
console.log("qty", item.qty);
console.groupEnd();
}
console.groupEnd();
}groupCollapsed starts the group folded; you click to expand. Combine the two to keep deep traces tidy.
Timing things
console.time(label) starts a stopwatch; console.timeEnd(label) prints the elapsed milliseconds; console.timeLog(label) prints a checkpoint without stopping. Labels must match between calls.
console.time("parse");
const tree = parse(source);
console.timeLog("parse", "ast ready");
const optimised = optimise(tree);
console.timeEnd("parse");parse: 3.21 ms ast ready parse: 12.84 ms
Counting calls
console.count(label) increments and prints a counter for the given label. Useful for "how many times did this render?" or "how often did this branch run?". console.countReset(label) zeros it back.
function render() {
console.count("render");
// ...
}
render(); render(); render();
// render: 1
// render: 2
// render: 3console.table
Arrays of objects render as a real table — sortable in some devtools, much easier to scan than a wall of JSON.
const users = [
{ id: 1, name: "Ada", role: "admin" },
{ id: 2, name: "Bob", role: "viewer" },
{ id: 3, name: "Cleo", role: "editor" },
];
console.table(users);
console.table(users, ["name", "role"]); // only these columnsPass an array of objects (one row each) or a plain object (keys become rows). The second argument restricts columns.
console.assert
console.assert(condition, ...message) logs an error only if the condition is falsy. It does not throw — execution continues. Use it for invariants you want to surface during development without halting the program.
console.assert(items.length > 0, "items should never be empty here", { items });
function add(a, b) {
console.assert(typeof a === "number", "a must be a number, got", typeof a);
return a + b;
}console.dir and console.dirxml
console.dir(obj) prints an interactive listing of an object's properties — handy when the default formatter is too eager to flatten things. console.dirxml prints the same for DOM nodes, showing the element tree instead of its property bag.
console.log(document.body); // a short DOM-element preview console.dir(document.body); // every property of the HTMLBodyElement console.dirxml(document.body); // the element tree
console.trace
console.trace(...args) prints a stack trace from the call site. Useful to answer "who is calling this?" without an actual debugger pause — sprinkle it inside a function and the caller chain shows up in every log.
function deprecated() {
console.trace("deprecated() was called from:");
// ... still works, but emits the trace each time
}Devtools-only helpers
These are not on the console object — they only exist inside the devtools console. They are too useful to skip:
$_— the result of the last evaluated expression.$0to$4— the currently selected DOM element and the previous four.$$(selector)/$x(xpath)— shortcut forArray.from(document.querySelectorAll(...)).copy(value)— copies the value to your system clipboard as JSON.monitor(fn)/unmonitor(fn)— log every call tofnwith its arguments.debug(fn)— pause the debugger wheneverfnis entered.