Collection of useful tools in the Chrome JavaScript console.

Make the whole page editable

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

• Introduce design conventions for controllers and user-facing models
• Create a system for growth
• Build applications to last

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

$_