Advanced Javascript Console Techniques Every Developer Should Be Aware Of

^{Photo by Kevin Ku on Unsplash}

If you've missed it, Part 1 of this series is here and the final post is here.

Second part of this short series. This is when I started to really learn something new. It covers methods that offer more advanced features and capabilities for console logging rather than simply dumping variable values.

console.assert() - Conditional logging to verify assumptions
console.table() - Display data in a tabular format
console.group() - Group related log messages together
console.trace() - Print a stack trace from the point where it is called
console.count() - Count the number of times a label has been logged

console.assert(); // Conditional logging

console.assert(1 === 1, "This will not be logged");
console.assert(1 === 2, "This will be logged as an error");

Assertion failed: This will be logged as an error

n.b. This is the method that triggered me to look in to this further. So much better than simply console.log()

console.table(); // Tabular data display

const people = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 }
];
console.table(people);

┌─────────┬────────────┬─────┐
│ (index) │   name     │ age │
├─────────┼────────────┼─────┤
│    0    │   Alice    │ 30  │
│    1    │    Bob     │ 25  │
└─────────┴────────────┴─────┘

console.group(); and console.groupEnd(); // Grouping console messages

console.group("Group 1");
console.log("Message 1");
console.group("Group 1.1");
console.log("Message 1.1");
console.groupEnd();
console.log("Message 2");
console.groupEnd();

Group 1
  Message 1
  Group 1.1
    Message 1.1
  Message 2

console.trace(); // Outputting stack traces

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

Trace message
    at b (index.js:3:13)
    at a (index.js:5:3)
    at :1:1

console.count(); and console.countReset(); // Counting log occurrences

console.count("Count label");
console.count("Count label");
console.countReset("Count label");
console.count("Count label");

Count label: 1
Count label: 2
Count label: 1

Why not try it out now in the developer console now? If you're on Chrone/Edge check out this guide.