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
Jesus (probably)

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

Chrome DevTools

And be an expert in the future with Canary

Chrome Canary

Setup for success

Learn shortcuts and hotkeys!


Core shortcuts

Mac OSXWindows
Open DevTools + opt + I F12 or ctrl + shift + I
Navigate Panels + [ / + ] ctrl + [ / ctrl + ]
Toggle Console esc esc
(various places)
ctrl + space ctrl + space
(various places)
+ F ctrl + F
Open Source File + O ctrl + O


Click buttons! Change settings! Break something!


Let's Play!

Pick a site, any site. www.what?

Additional resources

Thank You!

Jarrod Overson - jsoverson