Dev
Console-Log-Formatierer
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.
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.
What does the %c styling directive do?
In browser consoles, %c tells console.log to apply the CSS string in the following argument to the text that follows it — so console.log("%cuser", "color:#3b82f6;font-weight:bold;") prints a bold blue label. It is handy for making important logs stand out during debugging. The generator outputs a %c-styled variant alongside plain ones so you can pick the visibility you want.
Should these console.log statements ship to production?
Generally no — leftover console logs clutter the production console, can leak internal data, and add noise; strip them with a linter rule or a build step, or use a logging library with levels you can switch off. These snippets are for development and debugging. Generate them to inspect values while building, then remove or gate them before you ship.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.