Dev
Console Log Formatter
Used by developers, writers, and creators worldwide.
A console log formatter writes out several styles of console.log statement for a label and a variable, so your debugging output is readable instead of a wall of bare values. Enter a label and the name of the variable you want to inspect, and it returns ready-to-paste lines: a plain labelled log, a CSS-styled colourful log, a JSON-stringified version, a console.table call, a grouped log, and a debug-tagged line. Developers use it to quickly add clear, labelled logging while tracking down a bug, and to standardise how their team formats console output. Each statement uses your label and variable name, so you can paste it straight into your code. Everything runs in your browser. Pick the style that suits what you are inspecting — console.table for arrays of objects, JSON.stringify for nested data — and remember to remove or guard the logs before shipping to production.
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Enter a label for the log.
- Enter the variable name you want to inspect.
- Click Generate to produce several console statement styles.
- Copy the style that fits and paste it into your code.
Use Cases
- •Adding clear, labelled logging while debugging
- •Inspecting an object with console.table or JSON.stringify
- •Standardising console output style across a team
- •Quickly producing several logging variations to choose from
- •Teaching the lesser-known console methods like group and table
Tips
- →Use console.table for arrays of objects and JSON.stringify for nested data.
- →The %c styled log helps a label stand out in a busy console.
- →Group related logs with console.group for cleaner output.
- →Remove or guard debug logs before shipping to production.
FAQ
when should i use console.table
console.table shines for arrays of objects or objects with uniform keys, rendering them as a readable grid in the browser console. For a single value or deeply nested data, a labelled log or JSON.stringify is usually clearer.
what does the %c styling do
The %c directive applies CSS to the following text in supported browser consoles, so you can colour and embolden a label to make it stand out among many logs. It is ignored in environments that do not support console styling, like some terminals.
should these logs ship to production
No. Debug logging should be removed or guarded behind a flag before release, since it clutters output and can leak data. Use these while developing, then strip them or route them through a proper logger for production.