Read more

Things you probably didn’t know you could do with Chrome’s Developer Console

Tobias Kraze
January 16, 2017Software engineer at makandra GmbH

Collection of useful tools in the Chrome JavaScript console.

Make the whole page editable

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

This is not special to Chrome, but still a clever thing:

document.body.contentEditable=true 

Taking time

You can easily measure the time on the console with named timers:

console.time('myTime'); // Start timer
console.timeEnd('myTime'); // End timer and print the time

Reference previously inspected elements (from the Elements panel)

Variables $0, $1, ... $n reference the nth-last inspected Element. $0 is the element that's currently selected in the Elements panel.

Inspect elements

inspect() and dir() help with inspecting elements. While inspect() does just what Right Click > Inspect does, dir() turns elements into objects that hold their properties. Try dir($0).

Reference the previous result

$_

Posted by Tobias Kraze to makandra dev (2017-01-16 10:26)