Chrome Dev Tools
Tips and Tricks

Ido Green

Google Developer Day
Berlin
Nov 19, 2011

These slides: bit.ly/devtools-11

Agenda

1. Styling Control & CSS Manipulation
2. Network interaction
3. Console API
4. Script Debugging
5. Extension API
6. We recommend
7. Q & A

New here?

Styling Control

• Auto-complete everywhere
• Quick color manipulation
• New Style Rule
• psuedo-class selector toggles
  

CSS Manipulation

• CSS changes diffing
• Revert to a revision
• Save As...
• Freeform stylesheet editing
• Drag and drop elements

1. Styling Control & CSS Manipulation
2. Network interaction
3. Console API
4. Script Debugging
5. Extension API
6. We recommend
7. Q & A

Network

• Timeline: network & rendering info
• Disable disk cache & other settings
  

Console API

• There is a lot more than just console.log!
• Command Line API, too
• dir(), inspect(), $0, copy()
• Demo: flickr image grab

1. Styling Control & CSS Manipulation
2. Network interaction
3. Console API
4. Script Debugging
5. Extension API
6. We recommend
7. Q & A

Debugging

• We'll use this page
• DOM breakpoints
• Event listener breakpoints
• Live edit JavaScript
• No-refresh development™!

Debugging

• Script pretty-printing!
• 

Remote Debugging

• --remote-debugging-port=1337
• Available with the RIM Playbook today

DevTools Extension APIs

• chrome.devtools.panels
  Custom panels and sidebars
• chrome.devtools.audits
  Pluggable audits
• chrome.devtools.resources
  HAR resources access

We recommend

• Use the Chrome Dev Channel or Canary
• File tickets at new.crbug.com
• Hit ? for keyboard shortcuts
• code.google.com/chrome/devtools has documentation and videos
• smus.com/devtools-cheatsheet for a useful one-pager
• @ChromiumDev

Thank you!

• You are great developers that make the web awesome!
• I hope to see you in Google Developer Day 2012!