Console Commands Guide

Complete reference for browser console commands. Master debugging, performance monitoring, and advanced console techniques for better development workflow.

Logging Methods

Output information to the browser console with different severity levels.

console.log()

General-purpose logging for information and debugging.

// Basic logging
console.log('Hello, World!');

// Multiple arguments
console.log('User:', 'John', 'Age:', 30);

// Variables and expressions
const user = { name: 'Jane', age: 25 };
console.log('User object:', user);

// Template literals
console.log(`Total: ${10 + 20}`);

// Computed property names
const key = 'status';
console.log({ [key]: 'active' });
// Output: { status: 'active' }

Use for: General debugging and information display

console.info()

Informational messages (often displayed with an info icon).

console.info('Application started successfully');
console.info('API version:', '2.0.1');

Use for: Important informational messages

console.warn()

Warning messages (displayed in yellow/orange).

console.warn('This method will be deprecated in v3.0');
console.warn('Connection unstable, retrying...');

// Conditional warnings
if (user.age < 18) {
  console.warn('User is under 18');
}

Use for: Non-critical issues that need attention

console.error()

Error messages (displayed in red with stack trace).

console.error('Failed to load user data');
console.error('API Error:', error.message);

// With error object
try {
  throw new Error('Something went wrong');
} catch (error) {
  console.error('Caught error:', error);
}

Use for: Errors and exceptions

console.debug()

Debug-level messages (may be hidden by default).

console.debug('Function called with params:', params);
console.debug('Cache hit ratio:', stats.hitRatio);

// Enable in DevTools: Console settings → Show verbose messages

Use for: Detailed debugging information

Inspecting Data

Better ways to view and analyze complex data structures.

console.table()

Display arrays and objects as interactive tables.

// Array of objects
const users = [
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'User' },
  { id: 3, name: 'Charlie', role: 'User' }
];
console.table(users);

// Simple array
const fruits = ['apple', 'banana', 'cherry'];
console.table(fruits);

// Object
const person = { name: 'John', age: 30, city: 'NYC' };
console.table(person);

// Show only specific columns
console.table(users, ['name', 'role']);

Use for: Viewing structured data in readable format

console.dir()

Display interactive list of object properties.

// View DOM element properties (not HTML)
const element = document.querySelector('button');
console.dir(element);

// View object with all properties
const obj = { a: 1, b: { c: 2 } };
console.dir(obj);

// Useful for inspecting prototypes
console.dir(Array.prototype);

Use for: Exploring object properties and methods

console.dirxml()

Display XML/HTML representation of element.

const div = document.querySelector('.container');
console.dirxml(div);  // Shows HTML tree structure

// Compare with console.log()
console.log(div);      // Shows DOM element
console.dir(div);      // Shows object properties
console.dirxml(div);   // Shows HTML structure

Use for: Viewing DOM tree structures

Grouping Output

Organize console messages into collapsible groups.

console.group() / console.groupEnd()

Create nested, expandable log groups.

console.group('User Details');
console.log('Name: John Doe');
console.log('Email: [email protected]');
console.log('Role: Admin');
console.groupEnd();

// Nested groups
console.group('API Requests');
console.log('Starting requests...');

console.group('User Data');
console.log('Fetching user...');
console.log('User loaded');
console.groupEnd();

console.group('Posts Data');
console.log('Fetching posts...');
console.log('Posts loaded');
console.groupEnd();

console.log('All requests complete');
console.groupEnd();

console.groupCollapsed()

Like console.group() but starts collapsed.

console.groupCollapsed('Performance Metrics');
console.log('Load time: 234ms');
console.log('DOM ready: 156ms');
console.log('First paint: 189ms');
console.groupEnd();

// Great for verbose logging
function processItems(items) {
  console.groupCollapsed(`Processing ${items.length} items`);
  items.forEach((item, i) => {
    console.log(`Item ${i}:`, item);
  });
  console.groupEnd();
}

Use for: Organizing verbose or related logs

Performance Timing

Measure execution time and performance.

console.time() / console.timeEnd()

Measure time elapsed between two points.

// Basic timing
console.time('Array processing');
const result = array.map(x => x * 2).filter(x => x > 10);
console.timeEnd('Array processing');
// Output: Array processing: 1.234ms

// Multiple timers
console.time('Total');
console.time('Step 1');
// ... some code
console.timeEnd('Step 1');

console.time('Step 2');
// ... more code
console.timeEnd('Step 2');
console.timeEnd('Total');

// Async timing
console.time('API Call');
const data = await fetch('/api/users');
console.timeEnd('API Call');

console.timeLog()

Log current time without ending the timer.

console.time('Process');

console.timeLog('Process', 'Starting...');
// Process: 0.123ms Starting...

// ... some work
console.timeLog('Process', 'Checkpoint 1');
// Process: 45.678ms Checkpoint 1

// ... more work
console.timeLog('Process', 'Checkpoint 2');
// Process: 89.012ms Checkpoint 2

console.timeEnd('Process');
// Process: 123.456ms

Use for: Profiling and optimization

Counting Occurrences

Track how many times code is executed.

console.count()

Count and log number of times called.

// Count function calls
function greet(name) {
  console.count('greet called');
  return `Hello ${name}`;
}

greet('Alice');  // greet called: 1
greet('Bob');    // greet called: 2
greet('Charlie'); // greet called: 3

// Label-specific counts
function processItem(item) {
  if (item.type === 'A') {
    console.count('Type A');
  } else {
    console.count('Type B');
  }
}

items.forEach(processItem);
// Type A: 1
// Type B: 1
// Type A: 2
// Type B: 2

console.countReset()

Reset a specific counter.

console.count('clicks');  // clicks: 1
console.count('clicks');  // clicks: 2
console.count('clicks');  // clicks: 3

console.countReset('clicks');

console.count('clicks');  // clicks: 1

Use for: Tracking execution frequency

Assertions

Test conditions and log errors when they fail.

console.assert()

Log error message if assertion fails.

// Basic assertion
console.assert(1 === 1, 'Math still works');  // Silent
console.assert(1 === 2, 'Math is broken!');   // Error logged

// Variable validation
const user = { name: 'John' };
console.assert(user.name, 'User must have a name');
console.assert(user.email, 'User must have an email');  // Logs error

// Function validation
function divide(a, b) {
  console.assert(b !== 0, 'Cannot divide by zero');
  return a / b;
}

// Array validation
const items = [1, 2, 3];
console.assert(items.length > 0, 'Array is empty');
console.assert(items.length < 100, 'Array too large', items);

// With additional data
console.assert(
  response.status === 200,
  'API Error',
  { status: response.status, url: response.url }
);

Use for: Runtime validation and debugging
Note: Unlike other languages, this doesn't throw exceptions

Stack Traces

View call stack and execution path.

console.trace()

Output stack trace showing how code was reached.

function outer() {
  inner();
}

function inner() {
  deepFunction();
}

function deepFunction() {
  console.trace('How did we get here?');
}

outer();
// Output shows full call stack:
// trace: How did we get here?
//   deepFunction
//   inner
//   outer

// Debugging complex flows
function problematicFunction() {
  console.trace('Checkpoint');
  // ... complex logic
}

// Track event propagation
element.addEventListener('click', (e) => {
  console.trace('Click event triggered');
});

Use for: Understanding execution flow and debugging

Styling Console Output

Add CSS styling to console messages.

%c Directive

Apply CSS styles to console output.

// Basic styling
console.log(
  '%cHello World',
  'color: blue; font-size: 20px; font-weight: bold;'
);

// Multiple styles
console.log(
  '%cError: %cFile not found',
  'color: red; font-weight: bold;',
  'color: gray; font-style: italic;'
);

// Complex styling
console.log(
  '%c SUCCESS ',
  'background: #4CAF50; color: white; padding: 4px 8px; ' +
  'border-radius: 3px; font-weight: bold;'
);

// Rainbow text
console.log(
  '%cR%cA%cI%cN%cB%cO%cW',
  'color: red',
  'color: orange',
  'color: yellow',
  'color: green',
  'color: blue',
  'color: indigo',
  'color: violet'
);

// Banner messages
console.log(
  '%c MyApp v2.0 ',
  'background: linear-gradient(to right, #667eea 0%, #764ba2 100%); ' +
  'color: white; padding: 10px 20px; font-size: 16px; ' +
  'border-radius: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2);'
);

// Warning box
console.log(
  '%c⚠️ WARNING ',
  'background: #ff9800; color: black; padding: 8px; ' +
  'font-size: 14px; font-weight: bold; border-radius: 3px;'
);

String Substitution

Format strings with placeholders.

// %s - String
console.log('Hello %s', 'World');

// %d or %i - Integer
console.log('Count: %d', 42);

// %f - Float
console.log('Price: $%f', 19.99);

// %o - Object (expandable)
console.log('User: %o', { name: 'John', age: 30 });

// %O - Object (optimally useful formatting)
console.log('Config: %O', config);

// %c - CSS styling (shown above)

// Combined
console.log(
  '%cUser #%d: %s (age: %d)',
  'color: blue; font-weight: bold;',
  1,
  'Alice',
  25
);

Use for: Better visual organization and debugging

Clearing Console

Clear console output.

console.clear()

Clear all console messages.

console.log('Message 1');
console.log('Message 2');
console.clear();  // Console is now empty
console.log('Fresh start');

// Conditional clearing
if (resetDebug) {
  console.clear();
}

// Clear with message
console.clear();
console.log('Console cleared at:', new Date().toISOString());

Note: If "Preserve log" is enabled in DevTools, clear() will be ignored

Advanced Tips:

Use $_ in console to reference the last evaluated expression
Use $0-$4 to reference recently inspected DOM elements
Use $(selector) as shorthand for document.querySelector()
Use $$(selector) as shorthand for document.querySelectorAll()
Use copy(object) to copy any object to clipboard as JSON
Use monitor(function) to log when function is called
Use monitorEvents(element) to log all events on an element
Add conditional breakpoints with "Conditional" option in DevTools
Use debugger; statement to create programmatic breakpoints

Browser Support:

All major browsers support the Console API
Some methods may behave differently across browsers
Styled console output (%c) works in Chrome, Firefox, Edge, Safari
Helper functions ($, $$, copy, etc.) are DevTools-specific
Production code should use if (typeof console !== 'undefined') checks
Consider removing console logs in production or use a logging library