Chrome Dev Tools:
Tips and Tricks
Ido Green
JPR 2012
March, 2012
These slides: http://goo.gl/3ma4Y
Chrome Dev Tools:
The Chrome devtools is a great webapp that you can use to develop great web apps
New here?
The Chrome Dev Tools in 60 seconds.
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
- Styling Control & CSS Manipulation
- Network interaction
- Console API
- Script Debugging
- Extension API
- We recommend
- 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
- Styling Control & CSS Manipulation
- Network interaction
- Console API
- Script Debugging
- Extension API
- We recommend
- 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
Thank you!
- code.google.com/chrome/devtools
- @ChromiumDev
These slides:
goo.gl/cq5DQ