Recently I wanted to check out the state of CSS implementation in console.log method. After few minutes of fiddling with the code I’ve came up with an error handler* that displays a popular reaction GIF from the Friday movie:
But, how does it work?
The code behind the damnHandler function was eventually something like this:
According to the spec, there are plenty of formatters that can be used to improve the look of console.log‘s output. One of them is %c which applies CSS styling to the given text. The formatter has to appear before the formatted text.
So what we actually do is printing a 1px large dot, which uses line-height and padding properties in order to create a box with desired dimensions (the size of the image is 250px by 140px). We cannot simply use height and width altogether with display: block because these properties seem to be ignored. Eventually we set the background to point to the GIF image hosted at Giphy.
Sadly it seems to work on Chrome only. Firefox, Internet Explorer 11 and Edge ignore the background property and interpret line-height and padding combination differently than Chrome while used in console.log.
* Technically speaking, it’s not even a proper handler since it simply rethrows the error given. But you know, it’s for the science… ;)
Further reading