Build styled console.log statements with CSS formatting, tables, groups, and color-coded output.
Console.log Formatter is for composing browser-console code when plain console.log text is not enough. It turns log text and presentation choices into statements that use console format specifiers and CSS declarations, and it can arrange structured data as tables or related messages as labeled groups. The key surprise is that a color applies through a %c marker and its corresponding CSS argument. It affects that console message, not the web page and not later log entries.
A styled console.log statement places %c in the message and supplies a CSS declaration string as the corresponding later argument. Additional %c markers consume additional style arguments in order, which permits differently colored segments within one entry. The formatter's result is JavaScript source for a browser console, rather than HTML or a change to the document's CSS.
For row-like arrays or keyed objects, the formatter can construct console.table calls so DevTools presents the value in columns. For related messages, it can construct a console.group call, the enclosed logging statements, and console.groupEnd to close the section. Group calls organize subsequent console entries; they do not combine those entries into one value or one JavaScript expression.
Yes. The message can contain multiple %c markers, with one CSS string supplied for each marker in the same order. Each marker starts the next styled segment. Add a final %c and an empty CSS string when later text in that same entry should have no custom declarations. The exact visual result still depends on the target browser's console.
No. Browser consoles can differ in which CSS properties they accept, how they render tables, and how groups appear or start expanded. The generated statement expresses the requested console structure, but DevTools controls its final presentation. Test the result in the browser where the debugging session will actually occur, especially when color or alignment carries meaning.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.