Learning About Chrome DevTools

Chrome Canary Build

Google Chrome Canary has the newest of the new Chrome features. Be forewarned: it's designed for developers and early adopters, and can sometimes break down completely.

Not just bleeding edge, but bleeding from every orifice.

Pages

I use a few websites to keep up with Chrome Dev Tools fresh hotness:

• Umar Hansa's Dev Tips
• Awesome chrome-devtools
• Chrome Dev Tools Overview

People

• @addyosmani
• @paul_irish

Shows

• Totally Tooling Tips

Command Line API

copy(object)

copy(object) copies a string representation of the specified object to the clipboard.

• View more complex objects in your favourite text editor
• Diff two objects

table(data[, columns])

const bazs = 
[
  { foo : 0, bar : 0 },
  { foo : 1, bar : 1 }
];

Table displays a collection of objects in a tabular format.

inspect(object/function)

inspect(object/function) opens and selects the specified element or object in the appropriate panel: either the Elements panel for DOM elements or the Profiles panel for JavaScript heap objects.

$0-$4

Dev Tools remembers the last five DOM elements (or JavaScript heap objects) that you've selected in the tab (or Profiles panel). It makes those objects available as $0, $1, $2, $3, and $4. $0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on.

Miscellaneous Features

Framework Blackboxing

Dom Interactions

Command Palette

Eye Dropper