Practical Console Debugging Techniques for Frontend Development

Modern web projects often use frameworks like React or Vue, making debugging more challenging; while console.log() is common, the console object offers many powerful methods for richer output and analysis.

1. Basic Printing

1.1 console.log()

The most fundamental method, console.log(), prints values to the browser console. It supports multiple arguments, template literals, and format specifiers such as %s, %d, %f, %o/%O, and %c for CSS styling.

let name = "CUGGZ";
let age = 18;
console.log(name); // CUGGZ
console.log(`my name is: ${name}`); // CUGGZ
console.log(name, age); // CUGGZ 18
console.log("message:", name, age); // message: CUGGZ 18

Formatted output using placeholders:

let name = "CUGGZ";
let age = 18;
let height = 180;
console.log('Name: %s, Age: %d', name, age); // Name: CUGGZ, Age: 18
console.log('Age: %d, Height: %d', age, height); // Age: 18, Height: 180

CSS styling in console output:

let name = "CUGGZ";
console.log('My Name is %cCUGGZ', 'color: skyblue; font-size: 30px;');

Images can be displayed by printing CSS background images with appropriate padding and line‑height.

1.2 console.warn()

Outputs a warning message with a yellow triangle icon.

const app = ["facebook", "google", "twitter"];
console.warn(app);

1.3 console.error()

Outputs an error message and includes the call stack.

function a() { b(); }
function b() { console.error("error"); }
function c() { a(); }
c();

1.4 console.info()

Works like console.log() but is semantically for informational messages.

2. Timing

2.1 console.time() & console.timeEnd()

Measure execution time of code blocks. An optional label distinguishes multiple timers.

console.time();
setTimeout(() => { console.timeEnd(); }, 1000);

console.time("timer1");
console.time("timer2");
setTimeout(() => { console.timeEnd("timer1"); }, 1000);
setTimeout(() => { console.timeEnd("timer2"); }, 2000);

2.2 console.timeLog()

Logs the current elapsed time without stopping the timer.

console.time("timer");
setTimeout(() => {
  console.timeLog("timer");
  setTimeout(() => { console.timeLog("timer"); }, 2000);
}, 1000);

3. Grouping Output

3.1 console.group() & console.groupEnd()

Creates collapsible groups in the console. Groups can be nested.

console.group();
console.log('First Group');
console.group();
console.log('Second Group');
console.groupEnd();
console.groupEnd();

3.2 console.groupCollapsed()

Similar to console.group() but the group is collapsed by default.

console.groupCollapsed('Alphabet');
console.log('A');
console.log('B');
console.log('C');
console.groupCollapsed('Numbers');
console.log('One');
console.log('Two');
console.groupEnd('Numbers');
console.groupEnd('Alphabet');

4. Counting

4.1 console.count()

Tracks how many times a particular label has been logged.

for (let i = 0; i < 5; i++) { console.count(); }
for (let i = 0; i < 5; i++) { console.count('hello'); }

4.2 console.countReset()

Resets a counter back to zero, optionally for a specific label.

console.count();
console.count('a');
console.count('b');
console.countReset();
console.countReset('a');
console.countReset('b');

5. Other Useful Methods

5.1 console.table()

Displays arrays or objects as a formatted table. Accepts an optional list of columns.

const users = [
  {first_name: "Harcourt", last_name: "Huckerbe", gender: "Male", city: "Linchen", birth_country: "China"},
  {first_name: "Allyn", last_name: "McEttigen", gender: "Male", city: "Ambelókipoi", birth_country: "Greece"},
  {first_name: "Sandor", last_name: "Degg", gender: "Male", city: "Mthatha", birth_country: "South Africa"}
];
console.table(users, ['first_name', 'last_name', 'city']);

const app = ["facebook", "google", "twitter"];
console.table(app);

5.2 console.clear()

Clears the console output.

5.3 console.assert()

Logs an error message only when a given expression evaluates to false.

console.assert(list.childNodes.length < 100, "Node count is > 100");

5.4 console.trace()

Prints the current call stack.

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

5.5 console.dir()

Displays an object’s properties in a tree‑like format, useful for inspecting DOM nodes.

console.dir(object);

5.6 console.dirxml()

Shows an XML/HTML element and its descendants as an interactive tree.

console.dirxml(element);

5.7 console.memory

An object property that reports memory usage, helpful for detecting excessive console logging that may cause performance issues.