JavaScript Fundamentals

Console Methods

Use console methods to debug, inspect data, time code, and keep logs organized.

Find videos you like?

Save to resource drawer for future reference!

Why the Console?

Your fastest feedback loop for debugging, measuring performance, and understanding data structures.

Spot Bugs

Log values and state changes where issues occur.

Visibility

Explain Flow

Group messages to narrate the steps of a function.

Traceability

Measure Performance

Use timers to compare implementations and find slow spots.

Timing

Core Console Methods

Start with the essentials to log, warn, and inspect objects quickly.

console.log

General logging for variables, strings, and objects.

console.log('User:', user);

console.warn / error

Highlight risky or failing states with color and stack traces.

console.warn('Cache stale');

console.error('API failed');

console.table

View arrays/objects in a readable grid with column headers.

console.table(users);

Organize & Measure

Group related logs and time code to keep console output clean and informative.

console.group / groupEnd

Nest logs to narrate steps without clutter.

console.group('Checkout');

console.log('Validate cart');

console.log('Create order');

console.groupEnd();

console.time / timeEnd

Measure durations for API calls or loops.

console.time('fetch');

await loadData();

console.timeEnd('fetch');

Styling Console Output

Use %c tokens to add color and emphasis without overwhelming the console.

Prefix text with %c and pass CSS as the next argument.

console.log('%cHi', 'color:#a855f7;font-weight:700;');

Chain styles for multiple segments.

console.log('%cOK%c ready', 'color:#22c55e', 'color:#0f172a');

Use sparingly—too much styling hides signal.

console.log('%cBuild %cpassed', 'color:#fb923c', 'color:#0f172a');

Console Methods in Action

See all console methods demonstrated in one example

Complete Console Methods Demo

Explore log, warn, error, table, group, time, and styled console messages

javascript

code

DarkEditable

// Console Methods Demo
console.log('%c=== Console Methods Demo ===', 'color:#2563eb;font-weight:700;font-size:16px;');

// 1. console.log() - General purpose logging
console.log('✅ console.log() - Most common method');
console.log('Data:', { user: 'Alice', age: 25 });

console.log(''); // Empty line

// 2. console.table() - Display arrays/objects as table
console.log('📊 console.table() - Tabular data:');
const users = [
  { name: 'Ada', role: 'admin', active: true },
  { name: 'Grace', role: 'editor', active: false },
  { name: 'Lin', role: 'viewer', active: true }
];
console.table(users);

console.log(''); // Empty line

// 3. console.group() - Organize related logs
console.log('📁 Grouped logs:');
if (console.group) {
  console.group('User Actions');
  console.log('Step 1: Login');
  console.log('Step 2: Load dashboard');
  console.log('Step 3: Fetch data');
  console.groupEnd();
}

console.log(''); // Empty line

// 4. console.time() - Measure performance
console.log('⏱️ Performance timing:');
if (console.time) {
  console.time('Loop');
  let sum = 0;
  for (let i = 0; i < 100000; i++) {
    sum += i;
  }
  console.timeEnd('Loop');
  console.log('Sum:', sum);
}

console.log(''); // Empty line

// 5. Styled messages with %c
console.log(
  '%cSuccess!%c Operation completed', 
  'color:#16a34a;font-weight:700;font-size:14px;background:#dcfce7;padding:4px 8px;border-radius:4px;', 
  'color:#64748b;margin-left:8px;'
);

console.log('%c✅ All console methods demonstrated!', 'color:#10b981;font-weight:600;');

Console Output

Click "Run Code" to see output here...

Debugging Best Practices

Do This

✅ Use groups to cluster related logs.
✅ Include identifiers (user id, request id) in logs.
✅ Clear the console before focused runs (console.clear()).
✅ Remove noisy logs before shipping production builds.

Avoid This

❌ Logging large objects repeatedly (console floods).
❌ Leaving secrets/keys in logs.
❌ Timing code without labels (unclear output).
❌ Using styled logs everywhere—keep them purposeful.

Previous Topic

Comments

Writing single-line, multi-line, and JSDoc comments for better code documentation.

Next Topic

Operators

Arithmetic, assignment, comparison, logical, and type operators in JavaScript.

Ask a Question

Have a question about Console Methods? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Console Methods

Use console methods to debug, inspect data, time code, and keep logs organized.

Find videos you like?

Save to resource drawer for future reference!

Why the Console?

Your fastest feedback loop for debugging, measuring performance, and understanding data structures.

Spot Bugs

Log values and state changes where issues occur.

Visibility

Explain Flow

Group messages to narrate the steps of a function.

Traceability

Measure Performance

Use timers to compare implementations and find slow spots.

Timing

Core Console Methods

Start with the essentials to log, warn, and inspect objects quickly.

console.log

General logging for variables, strings, and objects.

console.log('User:', user);

console.warn / error

Highlight risky or failing states with color and stack traces.

console.warn('Cache stale');

console.error('API failed');

console.table

View arrays/objects in a readable grid with column headers.

console.table(users);

Organize & Measure

Group related logs and time code to keep console output clean and informative.

console.group / groupEnd

Nest logs to narrate steps without clutter.

console.group('Checkout');

console.log('Validate cart');

console.log('Create order');

console.groupEnd();

console.time / timeEnd

Measure durations for API calls or loops.

console.time('fetch');

await loadData();

console.timeEnd('fetch');

Styling Console Output

Use %c tokens to add color and emphasis without overwhelming the console.

Prefix text with %c and pass CSS as the next argument.

console.log('%cHi', 'color:#a855f7;font-weight:700;');

Chain styles for multiple segments.

console.log('%cOK%c ready', 'color:#22c55e', 'color:#0f172a');

Use sparingly—too much styling hides signal.

console.log('%cBuild %cpassed', 'color:#fb923c', 'color:#0f172a');

Console Methods in Action

See all console methods demonstrated in one example

Complete Console Methods Demo

Explore log, warn, error, table, group, time, and styled console messages

javascript

code

DarkEditable

// Console Methods Demo
console.log('%c=== Console Methods Demo ===', 'color:#2563eb;font-weight:700;font-size:16px;');

// 1. console.log() - General purpose logging
console.log('✅ console.log() - Most common method');
console.log('Data:', { user: 'Alice', age: 25 });

console.log(''); // Empty line

console.log('%c✅ All console methods demonstrated!', 'color:#10b981;font-weight:600;');

Console Output

Click "Run Code" to see output here...

Debugging Best Practices

Do This

✅ Use groups to cluster related logs.
✅ Include identifiers (user id, request id) in logs.
✅ Clear the console before focused runs (console.clear()).
✅ Remove noisy logs before shipping production builds.

Avoid This

❌ Logging large objects repeatedly (console floods).
❌ Leaving secrets/keys in logs.
❌ Timing code without labels (unclear output).
❌ Using styled logs everywhere—keep them purposeful.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Comments

Operators

JavaScript Code Editor

Building Your Learning Module...

Console Methods

Spot Bugs

Explain Flow

Measure Performance

console.log

console.warn / error

console.table

console.group / groupEnd

console.time / timeEnd

Complete Console Methods Demo

Do This

Avoid This

Comments

Operators

JavaScript Code Editor

Console Methods

Spot Bugs

Explain Flow

Measure Performance

console.log

console.warn / error

console.table

console.group / groupEnd

console.time / timeEnd

Complete Console Methods Demo

Do This

Avoid This