Creating Styled Console Logs in JavaScript with a PrettyLog Utility

Background

During a recent code review, my supervisor noticed the flashy console output in my local code and liked it, but asked whether it would affect performance in production. I assured that the logs are guarded to run only in development mode.

Console Overview

The console object is built‑in for debugging and logging, offering methods such as log, info, warn, error, and table to output various kinds of information.

Technical Solution

Placeholders

console.log()

supports placeholders similar to C's printf:

%s – string

%d or %i – integer

%f – floating‑point number

%o – object

%c – CSS style

Formatted Strings

Example of using placeholders:

const name = 'Alice';
const age = 30;
console.log('Name: %s, Age: %d', name, age); // Name: Alice, Age: 30

Adding Styles

Use the %c placeholder to apply CSS styles to the output:

console.log('%c This is a styled message', 'color: red; font-size: 20px;');

PrettyLog Implementation

The prettyLog factory returns an object with several logging methods. It first checks whether the current environment is production and skips logging if so.

// prettyLog factory
const prettyLog = () => {
  const isProduction = import.meta.env.MODE === 'production';
  const isEmpty = (value) => value == null || value === undefined || value === '';
  const prettyPrint = (title, text, color) => {
    if (isProduction) return;
    console.log(`%c ${title} %c ${text} %c`,
      `background:${color};border:1px solid ${color};padding:1px;border-radius:2px 0 0 2px;color:#fff;`,
      `border:1px solid ${color};padding:1px;border-radius:0 2px 2px 0;color:${color};`,
      'background:transparent');
  };

  const info = (textOrTitle, content = '') => {
    const title = isEmpty(content) ? 'Info' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#909399');
  };

  const error = (textOrTitle, content = '') => {
    const title = isEmpty(content) ? 'Error' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#F56C6C');
  };

  const warning = (textOrTitle, content = '') => {
    const title = isEmpty(content) ? 'Warning' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#E6A23C');
  };

  const success = (textOrTitle, content = '') => {
    const title = isEmpty(content) ? 'Success' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#67C23A');
  };

  const table = () => {
    const data = [
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
      { id: 3, name: 'Charlie', age: 35 }
    ];
    console.log('%c id %c name %c age',
      'color: white; background-color: black; padding: 2px 10px;',
      'color: white; background-color: black; padding: 2px 10px;',
      'color: white; background-color: black; padding: 2px 10px;');
    data.forEach(row => {
      console.log(`%c ${row.id} %c ${row.name} %c ${row.age}`,
        'color: black; background-color: lightgray; padding: 2px 10px;',
        'color: black; background-color: lightgray; padding: 2px 10px;',
        'color: black; background-color: lightgray; padding: 2px 10px;');
    });
  };

  const picture = (url, scale = 1) => {
    if (isProduction) return;
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const c = document.createElement('canvas');
      const ctx = c.getContext('2d');
      if (ctx) {
        c.width = img.width;
        c.height = img.height;
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.drawImage(img, 0, 0);
        const dataUri = c.toDataURL('image/png');
        console.log(`%c sup?`,
          `font-size: 1px; padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;`
          + `background-image: url(${dataUri}); background-repeat: no-repeat;`
          + `background-size: ${img.width * scale}px ${img.height * scale}px; color: transparent;`);
      }
    };
    img.src = url;
  };

  return { info, error, warning, success, table, picture };
};

// Usage example
const log = prettyLog();
log.info('This is basic info!');
log.info('Notice', 'A man named XiaoShuai!');
log.error('Error Title', 'Something went wrong');
log.warning('Watch out', 'Potential issue');
log.success('Great', 'Operation succeeded');
log.picture('https://example.com/image.png');

Development‑Only Logging

The utility checks import.meta.env.MODE to determine if the code is running in production; if so, all logging functions return early, preventing any console output in the production build.

Full Code

The complete source code is provided above, ready to be copied into a project and extended as needed.