JavaScript Console Tricks That Will Blow Your Mind

The console is your best friend. Here's how to use it like a pro.

Basic Logging (But Better)

// Basic (you know this)
console.log('Hello');
console.log('Value:', variable);
console.log('Object:', { name: 'Alex', age: 30 });

// Styled output (%c)
console.log(
  '%c✅ Success!',
  'color: green; font-size: 16px; font-weight: bold;'
);

console.log(
  '%c⚠️ Warning!',
  'color: orange; background: black; padding: 4px 8px; border-radius: 4px;'
);

console.log(
  '%c🔴 Error!',
  'color: red; font-size: 20px; text-decoration: underline;'
);

Table Display — Game Changer!

const users = [
  { id: 1, name: 'Alex', role: 'admin', active: true },
  { id: 2, name: 'Sam', role: 'user', active: false },
  { id: 3, name: 'Charlie', role: 'user', active: true },
];

console.table(users);
/*
┌─────┬────────┬──────┬───────┬────────┐
│ (idx) │   id   │ name │  role │ active │
├─────┼────────┼──────┼───────┼────────┤
│  0  │   1    │ Alex │ admin │ true   │
│  1  │   2    │ Sam  │ user  │ false  │
│  2  │   3    │Charlie│ user │ true   │
└─────┴────────┴──────┴───────┴────────┘
*/

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

Grouping Related Logs

// Group related output together
console.group('User Authentication');
  console.log('Step 1: Validate input');
  console.log('Step 2: Check credentials');
  console.log('Step 3: Generate token');
  console.info('Auth completed in 45ms');
console.groupEnd();

// Collapsed by default
console.groupCollapsed('API Request Details');
  console.log('URL:', '/api/users/123');
  console.log('Method:', 'GET');
  console.log('Status:', 200);
  console.log('Time:', '123ms');
console.groupEnd();

// Nested groups
console.group('Application Startup');
  console.group('Database Connection');
    console.log('Host: localhost');
    console.log('Port: 5432');
    console.log('Connected: ✅');
  console.groupEnd();

  console.group('Cache Initialization');
    console.log('Redis: connected');
    console.log('Memory cache: ready');
  console.groupEnd();
console.groupEnd();

Timing Performance

// Simple timing
console.time('fetchUsers');
await fetch('/api/users');
console.timeEnd('fetchUsers'); // fetchUsers: 234.567ms

// Multiple timers
console.time('query');
console.time('parse');
console.time('render');

// ... do work ...

console.timeEnd('render');   // render: 12.345ms
console.timeEnd('parse');    // parse: 5.678ms
console.timeEnd('query');    // query: 230.123ms

Assert — Conditional Logging

// Only logs when condition is FALSE
const user = { age: 15 };

console.assert(user.age >= 18, 'User must be 18+', user.age);
// Assertion failed: User must be 18+ 15

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

divide(10, 0); // Assertion failed: Division by zero! { a: 10, b: 0 }

Counting Occurrences

// Count how many times a line executes
function processItem(item) {
  console.count('Items processed');
}

['a', 'b', 'c', 'd', 'e'].forEach(processItem);
// Items processed: 1
// Items processed: 2
// Items processed: 3
// Items processed: 4
// Items processed: 5

// Reset counter
console.countReset('Items processed');

// Labelled counting
function handleRequest(endpoint) {
  console.count(`Endpoint: ${endpoint}`);
}
handleRequest('/api/users'); // Endpoint: /api/users: 1
handleRequest('/api/posts'); // Endpoint: /api/posts: 1
handleRequest('/api/users'); // Endpoint: /api/users: 2

Tracing the Call Stack

function outer() {
  inner();
}

function inner() {
  console.trace('Here!');
}

outer();
// Here!
//   at inner (<anonymous>:4:11)
//   at outer (<anonymous>:2:3)
//   at <anonymous>:7:1

Memory Debugging

// Check memory usage
console.memory;

// Log object with memory info
const bigData = new Array(1000000).fill({ x: 1, y: 2 });
console.log(bigData);
console.log('Memory used:', JSON.stringify(console.memory));

Object Inspection

const config = {
  api: 'https://api.example.com',
  timeout: 5000,
  retries: 3,
  features: {
    auth: true,
    caching: false,
  },
};

// dir shows properties interactively (better than log for objects)
console.dir(config, { depth: null, colors: true });

// dirxml for HTML/XML elements
console.dirxml(document.body);

Advanced: Custom Logger

class Logger {
  constructor(prefix) {
    this.prefix = prefix;
  }

  _format(type, ...args) {
    const timestamp = new Date().toISOString();
    const styles = {
      log: 'color: #333',
      warn: 'color: orange',
      error: 'color: red; font-weight: bold',
      info: 'color: blue',
      success: 'color: green; font-weight: bold',
    };

    return [`%c[${timestamp}] [${this.prefix}]`, styles[type] || '', ...args];
  }

  log(...args) { console.log(...this._format('log', ...args)); }
  warn(...args) { console.warn(...this._format('warn', ...args)); }
  error(...args) { console.error(...this._format('error', ...args)); }
  info(...args) { console.info(...this._format('info', ...args)); }
  success(...args) { console.log(...this._format('success', ...args)); }
}

const logger = new Logger('MyApp');
logger.success('Server started on port 3000');
logger.info('Processing request...');
logger.warn('Rate limit approaching');
logger.error('Database connection failed!');

Quick Reference

Method	Use Case
log()	Basic logging
log('%c...', style)	Styled messages
table(data)	Tabular display
group() / groupEnd()	Group related logs
time() / timeEnd()	Measure duration
assert(cond, msg)	Conditional failure
count(label)	Count occurrences
trace()	Show call stack
dir(obj, {depth})	Deep object inspection
memory	Heap usage stats

---

What's your favorite console trick?

Follow @armorbreak for more developer content.