Dev
Console Log Formatter
Debugging in JavaScript often means adding console.log everywhere, only to end up with unlabelled values hard to correlate with the code that produced them. This generator produces six console statement variants for a label and a variable name so you can pick the style that fits. Enter the label and variable name. Single quotes and backticks are stripped from the label; the variable is cleaned to valid JavaScript identifier characters. The generator returns: a plain labelled log, a CSS-styled log using %c, a JSON.stringify call with two-space indent, console.table, a console.group block, and a console.debug call tagged [DEBUG]. Pick the style that fits — table for arrays of objects, JSON.stringify for nested data, %c when a log needs to stand out. Remove all debug 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
what are the six console statement variants
A plain labelled log, a %c CSS-styled log with a blue bold label, a JSON.stringify call that pretty-prints the value, a console.table call, a console.group block that wraps a log with a label, and a console.debug call tagged with [DEBUG].
when should I use console.table
console.table renders a value as a grid in browser DevTools. It is most useful for arrays of objects with uniform keys. For a single object or deeply nested data, JSON.stringify or a plain log is usually clearer.
what does the %c directive do
In browser consoles, %c applies the CSS string in the following argument to the text after it. The generated example colours the label blue and makes it bold. It is silently ignored in environments that do not support console styling.
should I leave these logs in production code
No. Debug logs should be removed or gated behind a flag before release — they clutter the console and can leak internal data. Use a linter rule like no-console or a build step to strip them automatically.
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.