Who the hell is this guy?
And what does he know?
Browser Tools should make you happy
Use the right tool for the job
Man does not live by Chrome alone
Experiment, explore, and be familiar!
- IE DevTools
- Can emulate IE6-10 in various compliance modes.
- Firefox
- Has native dev tools & firebug extension.
- Natively supports 3d view, excellent for troubleshooting rogue DOM.
- Safari
- Familiar feel in webkit devtools.
- Can remotely debug mobile safari on iOS6.
- Opera
- "Dragonfly" will be based on Chrome DevTools going forward (ref).
But be an expert with Chrome
And be an expert in the future with Canary
Setup for success
- Make Canary your default browser
- Enable Developer Tools experiments (and more) in chrome://flags
- Get familiar with doc locations
Restart (for any flags that need it)
Learn shortcuts and hotkeys!
Core shortcuts
| Mac OSX | Windows | |
|---|---|---|
| Open DevTools | ⌘ + opt + I | F12 or ctrl + shift + I |
| Navigate Panels | ⌘ + [ / ⌘ + ] | ctrl + [ / ctrl + ] |
| Toggle Console | esc | esc |
| Auto-complete (various places) |
ctrl + space | ctrl + space |
| Find (various places) |
⌘ + F | ctrl + F |
| Open Source File | ⌘ + O | ctrl + O |
Explore!
Click buttons! Change settings! Break something!
Let's Play!
Pick a site, any site. www.what?
Additional resources
Thank You!
Jarrod Overson - jsoverson