clog() / slog() - console log functions with infinite depth

Frustated by console.log() not showing your whole object? I mean, we're trying to debug here right?!

These fancy console log upgrades are just the ticket:

// Client-side console log with infinite object depth
export const clog = (...args) => {
  args.forEach(arg => {
    console.log(JSON.stringify(arg, null, 2));
  });
}

Then it's simply:

clog("My whole object yay!", myObjectOrStringOrWhatever);

Or, if you're on the server and want even fancier colours et al:

import util from 'util';

export const slog = (...args) => {
  args.forEach(arg => {
    console.log(util.inspect(arg, {showHidden: false, depth: null, colors: true}));
  });
}

Note: this only works server-side e.g. in Node.js or Svelte SSR scripts or you'll get a ReferenceError: process is not defined

Related docs

Svelte 5 Runes explained (for Svelte 4 developers)

OpenAI ChatGPT API 429 "Too Many Requests" error - SOLVED

What's so good about Tailwind?

SQL vs MongoDB

Most Annoying MongoDB Atlas Gotcha

Tailwind x Svelte: Colours not Appearing

clog() / slog() - console log functions with infinite depth

How it works

Creating a Headless Blog with Svelte