Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to render HTML into Javascript console?

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.

like image 946
blagus Avatar asked Mar 22 '16 19:03

blagus


People also ask

Can HTML use console log?

The console. log() method in HTML is used for writing a message in the console. It indicates an important message during testing of any program. The message is sent as a parameter to the console.

Can JavaScript read the console?

You can't. What's in the console can't be read from JavaScript. console. logs contains all what was logged.

What can you do with JavaScript console?

The Console can be used to log information as part of the JavaScript development process, as well as allow you to interact with a web page by carrying out JavaScript expressions within the page's context. Essentially, the Console provides you with the ability to write, manage, and monitor JavaScript on demand.

How do I render HTML?

The Render Functionrender() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.


1 Answers

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");
like image 191
j08691 Avatar answered Oct 03 '22 07:10

j08691