Is it possible to render HTML into Javascript console?

Question

I would like to render HTML from a console.(log/info/warn):

console.html("<h1>Hello!</h1>");

would render…

Hello!

…into the console panel. Is it possible somehow?

ps.: for the record, I would like to have more coloring options than log/info/warn/error messages.

you can also use console.table to render an array or array of objects: developer.mozilla.org/en-US/docs/Web/API/Console/table — Clay
– Clay, Commented Mar 25, 2021 at 19:06

Sebastian Zartner · Accepted Answer · 2016-03-22 20:23:01Z

18

In a way it's possible using the CSS format specifier.

Example:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

The CSS format specifier allows you to customize the display in the console. Start the string with the specifier and give the style you wish to apply as the second parameter.

This feature is supported by all main browser developer tools. See the reference for the Chrome DevTools, the one for the Firefox DevTools or the one for Firebug.

So while you can't use HTML per se, you can style whatever text you want using CSS to mimic many HTML elements:

console.log("%cHello!", "font-size: 3em");

edited Mar 22, 2016 at 20:23

Sebastian Zartner

20.4k10 gold badges104 silver badges143 bronze badges

answered Mar 22, 2016 at 20:03

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

blagus Over a year ago

Yeah baby yeah. Very nice. In my MacOS, works in all browsers except Opera DragonFly.

Fifi Over a year ago

Nice, but HTML tags are not interpreted.

Collectives™ on Stack Overflow

Is it possible to render HTML into Javascript console?

Hello!

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Hello!

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related