Unlock Console Magic: Master %c, %o, %O and ASCII Art in Browser DevTools

In ordinary usage console.log prints simple text, but browsers provide a powerful API that supports format specifiers and CSS styling, enabling highly expressive debugging output.

Basic Syntax

The fundamental syntax is:

console.log(object [, object, …])

Supported Placeholders

%s – string

%d or %i – integer

%f – floating‑point number

%o – expandable DOM object (similar to the Elements panel)

%O – list object properties

%c – apply CSS styles to the formatted string

Example Using All Placeholders

// First argument contains five placeholders; the following arguments replace them in order.
console.log("%c Look %o and %O , it %s and %d ",
            "color: #6190e8;",
            {AA: "WCN", BB: "wcn"},
            {AA: "WCN", BB: "wcn"},
            "CC",
            123);

Inspecting DOM with %o and %O

Both specifiers work on plain objects, but they differ for DOM nodes. The following snippets illustrate the behavior:

console.log('%o', document.body.firstElementChild); // expandable DOM node
console.log('%O', document.body.firstElementChild); // list properties of the node

Firefox displays the expandable view for %o, while IE does not support %o or %O at all. Chrome shows normal output for both.

Styling Output with %c

The argument following %c must be a CSS declaration string. This enables background colors, gradients, 3D text effects, and even background images. Example:

console.log("%c    ", "background: url(http://aotu.io/assets/img/o2logo.png) no-repeat left center; font-size: 60px;", "
");

Note that the console cannot embed <img> tags; background images are used instead. Width and height are not supported, so developers rely on spaces, font-size, padding, or line-height to simulate size. Chrome deliberately blocks background images in the console, while Firebug (Firefox) supports them.

Creating ASCII Art in the Console

By combining %c with newline characters ( \n) and carefully crafted strings, complex ASCII art can be rendered. Below is a condensed example (the full source is much longer):

console.log("%c
                :J:   
                :. i   
                ..:::::::,.:.,..:..::rr   J   
                ::i:,        FB   v   
                ...");

The resulting output appears as a stylized picture in the console (see screenshot).

Tools for Generating ASCII Art

Online tool: picascii

Online tool: img2txt

ASCII Generator Portable (downloadable)

Using ASCII Generator

Load an image, adjust size, font, brightness, contrast, and dithering until satisfied, then copy the generated text.

Paste into a code editor, remove line‑break characters at the start of each line, and replace them with \n so the code becomes a single line.

Insert the resulting string into console.log("…"), optionally combining with %c for extra styling.

Compatibility Summary

IE8/9 support console only when developer tools are open; IE6/7 lack console entirely. %c, %o, and %O are unsupported in IE; Firefox supports both %o and %O, while Chrome supports %c but not background images.

Background‑image rendering via %c works in Firebug (Firefox) but is deliberately disabled in Chrome.

Clickable links in console output work in Chrome; Firefox requires a leading space; Firebug and IE do not support clickable links.

Front‑end developers who favor Chrome may notice that recruitment messages only appear in Chrome or WebKit browsers—a humorous side note.