Using console methods0%
Breakpoints in DevTools

Using console methods

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Using console Methods in Modern JavaScript

While almost every developer knows console.log(), the browser and Node.js console API provides over 20 specialized methods designed for performance profiling, data tabularization, visual grouping, stack tracing, and assertion verification.

1. Beyond console.log: Informational Levels

Different console levels display with distinct colors, icons, and severity filtering in DevTools:

JavaScript
console.log('Standard informational message.');
console.info('Tip / info notice (blue badge in some consoles).');
console.warn('Warning: API response missing optional field!');
console.error('Critical Error: Failed to commit transaction!');

2. Visualizing Complex Data: console.table()

When inspecting arrays of objects, console.table() formats the output as an interactive, sortable table:

JavaScript
const engineers = [
{ id: 1, name: 'Alice', role: 'DevOps', salary: 110000 },
{ id: 2, name: 'Bob', role: 'Frontend', salary: 95000 },
{ id: 3, name: 'Charlie', role: 'Backend', salary: 105000 }
];
 
// Display entire dataset as a table:
console.table(engineers);
 
// Filter table to display specific columns only:
console.table(engineers, ['name', 'role']);
Output
┌─────────┬───────────┬────────────┐
│ (index) │ name │ role │
├─────────┼───────────┼────────────┤
│ 0 │ 'Alice' │ 'DevOps' │
│ 1 │ 'Bob' │ 'Frontend' │
│ 2 │ 'Charlie' │ 'Backend' │
└─────────┴───────────┴────────────┘

3. Profiling Performance: console.time() & console.timeEnd()

Accurately benchmark the execution duration of code segments in milliseconds:

JavaScript
console.time('DataProcessingTimer');
 
// Perform compute-intensive logic
const largeList = Array.from({ length: 1000000 }, (_, i) => i * 2);
const filtered = largeList.filter(n => n % 3 === 0);
 
console.timeEnd('DataProcessingTimer');
// Logs: DataProcessingTimer: 42.18ms

4. Organizing Logs: console.group() & console.groupCollapsed()

Avoid messy console clutter by grouping related logs into collapsible hierarchies:

JavaScript
function processOrder(orderId) {
console.groupCollapsed(`Order #${orderId} Processing Details`);
console.log('Validating inventory...');
console.log('Checking credit card authorization...');
console.log('Packaging warehouse manifest...');
console.groupEnd();
}
 
processOrder('ORD-991');

5. Assertions & Stack Traces

console.assert()

Logs an error message only if an expression evaluates to false (does not halt execution):

JavaScript
const userScore = 45;
// Logs error ONLY if userScore < 50
console.assert(userScore >= 50, `Score is below passing threshold! Value: ${userScore}`);

console.trace()

Prints the complete call stack trace from where the method was invoked:

JavaScript
function stepC() { console.trace('Tracing call origin'); }
function stepB() { stepC(); }
function stepA() { stepB(); }
stepA();
Interactive Quiz

Practice Quiz

Question 1
Which console method formats an array of objects as a clean, sortable tabular grid in DevTools?
Question 2
What pair of console methods is used to measure how many milliseconds a block of code took to execute?
Question 3
When does console.assert(condition, message) log an error?
Question 4
Which method creates a collapsible group in the DevTools console that starts in a collapsed state?
Question 5
What does console.trace() output?
Next Lesson

Breakpoints in DevTools

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Generators with function*Breakpoints in DevTools

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext