Collection of useful tools in the Chrome JavaScript console.

Make the whole page editable

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

$_

medium.freecodecamp.com

Tobias Kraze

makandra.de

Say thanks1

Last edit

2023-11-06

Michael Leimstädtner

License

Source code in this card is licensed under the MIT License.

Async control flow in JavaScript: Promises, Microtasks, async/await

Slides for Henning's talk on Sep 21st 2017.

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

print('script start')
html = get('/foo')
print(html)
print('script end'...

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

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