Console Methods Deep Dive
Beyond console.log — learn console.table, console.group, console.time, console.assert, and console.trace for professional debugging. Each method serves a specific purpose.
Console Methods
- console.table(data) — Display arrays/objects as formatted table. Best for lists of objects
- console.group('label') / groupEnd() — Group related logs (collapsible in DevTools)
- console.time('label') / timeEnd('label') — Measure execution time
- console.assert(condition, msg) — Only logs if condition is FALSE. Silent when true
- console.trace() — Print the full call stack (who called this function?)
- console.count('label') — Count how many times a code path executes
- console.dir(element) — Show DOM element as object (not HTML)
Console Methods Code
// console.table — beautiful data display
const users = [
{ name: "Alice", age: 25, role: "admin" },
{ name: "Bob", age: 30, role: "user" },
{ name: "Charlie", age: 28, role: "editor" }
];
console.table(users);
console.table(users, ["name", "role"]); // show only specific columns
// console.group — organize related logs
console.group("🔐 Authentication");
console.log("Checking token...");
console.log("Token valid ✅");
console.log("User: Alice");
console.groupEnd();
// console.time — performance measurement
console.time("Array creation");
const bigArray = Array.from({ length: 100000 }, (_, i) => i);
console.timeEnd("Array creation");
console.time("Filter");
const filtered = bigArray.filter(n => n % 2 === 0);
console.timeEnd("Filter");
// console.assert — only logs on failure
console.assert(1 === 1, "This won't show");
console.assert(1 === 2, "This WILL show — assertion failed!");
// console.count — count executions
function processItem(item) {
console.count("processItem called");
return item * 2;
}
[1, 2, 3].forEach(processItem);
// processItem called: 1, 2, 3
// console.trace — show call stack
function a() { b(); }
function b() { c(); }
function c() { console.trace("Trace from c"); }
a(); // Shows: c → b → a → (anonymous)Tip
Tip
Use console.group/groupEnd to organize related logs. console.time/timeEnd measures performance. console.assert only logs when a condition is false — great for sanity checks during development.
Use console.table for objects. console.time to profile. debugger; for breakpoints. Chrome DevTools > console.log.
Common Mistake
Warning
Using console.log(obj) logs a live reference in some browsers. By the time you expand it, the object may have changed. Use console.log(JSON.parse(JSON.stringify(obj))) or console.log({...obj}) for a snapshot.
Practice Task
Note
Console mastery: (1) Use console.table for an array of objects. (2) Use console.time to measure a loop's execution time. (3) Use console.group to organize logs by feature.
Quick Quiz
Key Takeaways
- Beyond console.
- console.table(data) — Display arrays/objects as formatted table. Best for lists of objects
- console.group('label') / groupEnd() — Group related logs (collapsible in DevTools)
- console.time('label') / timeEnd('label') — Measure execution time