Chrome Dev Tools

Surprise and Delight

Corey Light

December 2013 / Show-Me Tech

Shortcuts

• Launch in inspect-element mode

  Cmd + Shift + C will open up DevTools in inspect element mode so you can inspect the current page immediately.

• Toggle console

  Esc quickly toggles the console

• Number Increment/Decrement

  ⬆ Increments by 1; while Alt+⬆ Increments by .1

• See all shortcuts

  ? to see 'em all

Elements

• $0 to use the currently selected element in the console
• H to visually hide element
• Force Element State - :active, :hover, :focus, :visited
• Shadow DOM!
• Drag and Drop
• Event listeners!

Workspaces

A new badass way to look at a browser/text editor workflow

The Console

Snippets

What I didn't Cover

• Profiling
• Timeline
• Audits
• Plugins
• Canvas Inspection

Questions?

Thanks!