search

adriancooney / console.image

The one thing Chrome Dev Tools didn't need.
1.77k stars 131 forks source link

readme

console.image

The one thing Chrome Dev Tools didn't need.

The day has come when you have the ability to put images in the console. Checkout here for a demo and open up the dev tools. Also, check out the awesome chrome extension by @jffry. Console.image now has a little baby sister, console.snapshot. It snapshots the canvas and outputs it to the console to make debugging the canvas a little less dramatic. Shoutout to https://github.com/escusado/console.meme too, I would have forked it if I realized it existed.

Images.. in the console?

How to use it

console.image(url)

Basically, you console.image(url).

Examples:

console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");

console.meme(upper text, lower text, meme type|url, width, height)

There is also support for dynamically creating on-the-fly real-time memes. Yes, memes.

Examples:

console.meme("Not sure if memes in dev tools is stupid", "or disastrous.", "Not Sure Fry");
console.meme("Not sure if memes in dev tools is stupid", "or disastrous.", "Not Sure Fry", 400, 300);
console.meme("Not sure if memes in dev tools is stupid", "or disastrous.", "http://i.imgur.com/vu4zTYT.jpg", 400, 300);

This meme is bad. I know. It's a demo.

It even supports gifs.

How it works

Console.image works by hooking into the ability to style console.log messages in the form of console.log("%c[message]", [style rules]). It sets the background-image and changes the color to transparent. It isn't all fairies and fucking ponies, however. When you set the image to the background, unless you have the dimensions on the font exactly correct you see an image repeating even with no-repeat set. This we can't have. After delving into the Web Inspector source, I found the problematic code:

var currentStyle = null;
function styleFormatter(obj)
{
    currentStyle = {};
    var buffer = document.createElement("span");
    buffer.setAttribute("style", obj.description);
    for (var i = 0; i < buffer.style.length; i++) {
        var property = buffer.style[i];
        if (isWhitelistedProperty(property))
            currentStyle[property] = buffer.style[property];
        }
    }

    function isWhitelistedProperty(property)
    {
        var prefixes = ["background", "border", "color", "font", "line", "margin", "padding", "text", "-webkit-background", "-webkit-border", "-webkit-font", "-webkit-margin", "-webkit-padding", "-webkit-text"];
        for (var i = 0; i < prefixes.length; i++) {
            if (property.startsWith(prefixes[i]))
            return true;
        }
        return false;
    }
}

The code above formats the inputted style. We can see the the inspector takes the inputted style and tests it on a buffer element to validate them. It then takes the validated styles and checks to see if they're whitelisted, if they pass, they're put in the currentStyle object. As you can see, this shatters any dreams of setting widths, heights or animations. Bastards but entirely understandable. Unfortunately this method creates a problem with the background-repeat property which will be explained after you take a gawk at the code below.

function append(a, b)
{
    if (b instanceof Node) a.appendChild(b);
    else if (typeof b !== "undefined") {
        var toAppend = WebInspector.linkifyStringAsFragment(String(b));
        if (currentStyle) {
            var wrapper = document.createElement('span');
            for (var key in currentStyle) wrapper.style[key] = currentStyle[key];

            wrapper.appendChild(toAppend);
            toAppend = wrapper;
        }
        a.appendChild(toAppend);
    }
    return a;
}

This snippet appends the styled message into the parent console message. As you can see, it loops over the currentStyle object and sets any style within it to the wrapper's style. What's the problem? The browser for some reason returns background-repeat-x and background-repeat-y for the background repeat property. These properties have no effect when they are set on the wrapper and thus the background-repeat style is lost in translation. So now, I had to find a solution where only the whitelisted properties are used but in the end it was fairly simple.

I used the padding, line-height and font-size properties. I set the padding on the left and right to half the width and the top and bottom to the half the height of the image. I then set the font-size to 1px to ensure it doesn't distort the width. Since padding on an inline element has no effect on it's dimensions, I used the line-height to manually set the height and that displayed the images.

Meme Types

Not for linux users

Linux does not come with the meme font of choice 'impact' out of the box. To use console.meme you are going to want to install the 'impact' font first:

 sudo apt-get install ttf-mscorefonts-installer

This package is also available in the ubuntu software center.

LICENSE: WTFPL