Chrome DevTools
Blake Dietz
Twitter: @dietztweetz
Github: @blakedietz
Chrome DevTools
- Why
- Learning resources
- Bread and butter
- Command line API
- Miscellaneous features
- Your favorite features
Bread and Butter
- Elements
- Console
- Sources
- Network
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:
People
- @addyosmani
- @paul_irish
Shows
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 }
];
![](https://s3.amazonaws.com/media-p.slid.es/uploads/88628/images/2692902/1.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/88628/images/2695067/chrome-dev-tools-framework-black-boxing.png)
Dom Interactions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/88628/images/2695118/chrome-dev-tools-dom-interaction.png)
Command Palette
![](https://s3.amazonaws.com/media-p.slid.es/uploads/88628/images/2696684/Chrome_Release_Channels_-_The_Chromium_Projects_2016-06-01_16-36-02.png)
Eye Dropper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/88628/images/2696761/Google_2016-06-01_16-57-39.png)
What are Your Favorite Features?
chrome-dev-tools
By Blake A Dietz
chrome-dev-tools
- 790