Skip to content

A nice snippet to log images in chrome console ๐ŸŒˆ

License

Notifications You must be signed in to change notification settings

YannickDot/console.image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

10 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

console.image

A nice snippet to log images in chrome console ๐ŸŒˆ

Why is that ?

This snippet is heavily inspired from Paul Irish talk at Chrome Dev Summit 2016 on November, 10 2016.

He showed all the new stuff coming in Chrome Devtools in the latest version of Chrome (v55). Here is the link.

This is his idea. I've only managed to reproduce his output from what I've seen on his snippet. ๐Ÿ˜‰

Installation

You can use it from npm :

> npm install console.image

then import it into your code :

import 'console.image'

And it will add the .image() method on your console object in Chrome Devtools.

Otherwise you can copy the code to your Chrome snippets.

Usage

const avatar_url = 'https://avatars3.githubusercontent.com/u/USER_ID'

console.image(avatar_url)

and you get :

demo

Snippet

Here's the code if you want to store it to your Chrome snippets :

function renderImage (url, scale = 0.3) {
  let img = new Image()

  img.onload = () => {
    const style = `
      display: block !important;
      margin: 10px 0;
      font-size: ${img.height * scale}px;
      padding: ${Math.floor(img.height * scale/2)}px ${Math.floor(img.width * scale/2)}px;
      background: url(${url});
      background-size: ${img.width * scale}px ${img.height * scale}px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    `
    console.log('%c', style)
  }

  img.src = url
}

console.image = renderImage

About

A nice snippet to log images in chrome console ๐ŸŒˆ

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published