The console object is still one of the fastest ways to understand what your code is doing. Modern DevTools keep adding convenience features, but the core console API is stable and powerful. Below is an updated, practical list of the console methods you should know, with quick examples you can paste into the browser console or Node.js.

1. Logging levels: log, info, debug, warn, error

These are the everyday logging methods. They render with different severities (and are often filterable in DevTools), which helps you separate signal from noise.

console.log("User loaded");
console.info("Using cached profile");
console.debug("payload", payload);
console.warn("Slow response", { ms: 842 });
console.error("Request failed", err);

2. console.assert()

Log an error only when a condition is false. This is great for enforcing invariants during development.

console.assert(user, "User must be defined");
console.assert(items.length > 0, "Cart should never be empty here");

3. console.table()

Render arrays and objects as a table. Optionally pass a list of columns to show.

const users = [
  { id: 1, name: "Ada", role: "admin" },
  { id: 2, name: "Linus", role: "editor" },
  { id: 3, name: "Grace", role: "viewer" }
];

console.table(users);
console.table(users, ["id", "name"]);

4. console.group() and friends

Group related logs together. Use groupCollapsed() to start closed, then finish with groupEnd().

console.group("Auth flow");
console.log("Step 1: Start");

console.groupCollapsed("Details");
console.log("token", token);
console.log("scopes", scopes);
console.groupEnd();

console.log("Step 2: Done");
console.groupEnd();

5. console.count() and console.countReset()

Count how many times a line executes. Labels help separate different counters.

console.count("fetch");
console.count("fetch");
console.count("render");
console.countReset("fetch");
console.count("fetch");

6. console.time(), console.timeLog(), console.timeEnd()

Track how long a block of work takes. timeLog() lets you mark checkpoints.

console.time("render");
// ... render step 1
console.timeLog("render", "after step 1");
// ... render step 2
console.timeEnd("render");

7. console.trace()

Print a stack trace at the exact point where the log happens.

function a() { b(); }
function b() { c(); }
function c() { console.trace("Trace here"); }

a();

8. console.dir() and console.dirxml()

Use these when you want to inspect objects or DOM nodes more explicitly.

console.dir(window.location);
console.dirxml(document.body);

9. console.clear()

Clear your console output.

console.clear();

10. Formatting placeholders and styling

The console supports formatting placeholders like %s, %d, %f, %o, %O, and %c for CSS styling.

console.log("User %s (%d)", "Ada", 42);
console.log("raw object: %o", { id: 1, name: "Ada" });
console.log("expanded object: %O", { id: 1, name: "Ada" });
console.log("%cStyled text", "color: #0b7285; font-weight: bold;");

Quick tips

  • Use console.table() for arrays of objects.
  • Group noisy logs with console.groupCollapsed().
  • Keep console.count() and console.time() in your toolbox for performance debugging.

Wrapping up

If you already use console.log(), the rest of these methods will make your debugging sessions faster, cleaner, and more focused. Try adding just two or three of these to your daily workflow and see the difference.