Unlock Powerful Debugging: Master Advanced console Methods in JavaScript

console.log()

Beyond the basic console.log(object), you can pass multiple arguments or use a sprintf‑like format console.log(msg, values). Placeholders such as %s, %o, %d and %c (for CSS styling) let you embed strings, objects, numbers, or styled text directly in the output.

console.log('I like %s but I do not like %s.', 'Skittles', 'pus');

Result: > I like Skittles but I do not like pus. The %c placeholder applies CSS to the following text, though it has no closing tag.

console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px');

console.dir()

Similar to console.log but displays a fully expandable object view, especially useful for DOM elements.

let element = document.getElementById('2x-container');

console.warn()

Outputs a yellow warning (level warning) that stands out in noisy logs and can be filtered separately from regular logs.

console.table()

Displays array or object data as a formatted table, optionally limiting columns. It supports sorting by clicking column headers and handles up to 1,000 rows.

const transactions = [{id:"7cb1-e041b126-f3b8",seller:"WAL0412",buyer:"WAL3023",price:203450,time:1539688433}, {id:"1d4c-31f8f14b-1571",seller:"WAL0452",buyer:"WAL3023",price:348299,time:1539688433}, {id:"b12c-b3adf58f-809f",seller:"WAL0012",buyer:"WAL2025",price:59240,time:1539688433}];

Using console.table(transactions) shows a clear grid; you can restrict columns:

console.table(data, ["id","price"]);

console.assert()

Logs only when the first argument evaluates to false, making it handy for conditional debugging. console.assert(tx.timestamp, tx); For more complex conditions, invert the logic so the assertion fires only on unexpected values.

console.assert(tx.buyer !== 'WAL0412', tx);

console.count()

Counts occurrences of a label; calling without a label uses the default counter. console.countReset(label) resets it.

for(let i=0;i<10000;i++){
  if(i%2) console.count('odds');
  if(i%5===0) console.count('multiplesOfFive');
  if(isPrime(i)) console.count('prime');
}

console.trace()

Prints a stack trace to pinpoint where a call originated, useful when many components invoke the same service.

export default class CupcakeService {
  constructor(dataLib){
    this.dataLib = dataLib;
    if(typeof dataLib !== 'object'){
      console.log(dataLib);
      console.trace();
    }
  }
}

console.time() / console.timeEnd()

Measures execution time. Modern usage wraps the timed code with console.time('label') and console.timeEnd('label') without manual date calculations.

const slowFunction = number => {
  console.time('slowFunction');
  // ...slow work...
  console.timeEnd('slowFunction');
};
for(let i=0;i<100000;i++) slowFunction(i);

console.group() / console.groupEnd()

Creates nested, collapsible sections in the console to organize output, with console.groupCollapsed starting collapsed.

let number = 1;
console.group('OutsideLoop');
console.log(number);
console.group('Loop');
for(let i=0;i<5;i++){
  number = i + number;
  console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log('All done now');

Conclusion

All these console utilities can enhance debugging beyond plain console.log. console.table is often the most handy, but each method—warnings, assertions, counters, timing, tracing, and grouping—has its own niche for clearer, faster troubleshooting.