JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

Styled console.log helper function

<p> As of <a href="https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/">Firefox 31</a> (currently in Aurora), Firefox DevTools supports styled console logging).
<p>
    I had thought about this before in <a href="http://www.briangrinstead.com/blog/console-log-helper-function">console.log helper function</a>.
</p>

<p>
    Firefox DevTools allows <code>console.log("%c", "color:red", "foo", "bar", "baz")</code> and the remaining arguments will be logged with style.
</p>

<p>
    This means you can add your own console methods easily, and they will keep the original line numbers when loging, like:
</p>

<pre>
    console.burn = console.log.bind(console, "%c", "color:red");
</pre>

JavaScript

console.burn = console.log.bind(console, "%c", "color:red");

function a() {
    function b() {
        function c() {
            console.burn("foo", "bar", "baz");
        }
        c();
    }
    b();
}

a();