Slide 1
Slide 1 text
(DEVELOPER)
TOOLS
THE AMAZING TOOLKIT IN YOUR BROWSER
Ross Wintle
@magicroundabout
Slide 2
Slide 2 text
INSIDE YOUR
BROWSER IS...
Slide 3
Slide 3 text
INSIDE YOUR
BROWSER IS...
a magical fairy wonderland...?
Slide 4
Slide 4 text
INSIDE YOUR
BROWSER IS...
a ton of clever code that draws
stuff on your screen?
Slide 5
Slide 5 text
INSIDE YOUR
BROWSER IS...
a super-useful toolkit that not
everyone knows about?
Slide 6
Slide 6 text
DEVELOPER
TOOLS
Slide 7
Slide 7 text
IT SHOULDN’T BE CALLED
DEVELOPER TOOLS
Slide 8
Slide 8 text
I’M NOT A
MECHANIC
Slide 9
Slide 9 text
LIKE UNDER THE
BONNET OF A CAR
There are things you can do yourself
Slide 10
Slide 10 text
LIKE UNDER THE
BONNET OF A CAR
There are things you think
you can do yourself
Slide 11
Slide 11 text
LIKE UNDER THE
BONNET OF A CAR
There are things you pay an
expert to do
Slide 12
Slide 12 text
Inspect HTML and CSS code
Test mobile views (responsive testing)
Performance checks
Try changes to HTML and CSS
Diagnose HTML and CSS
Take screenshots (including full page!)
JavaScript fun!
(??) TOOLS
Slide 13
Slide 13 text
WHO IS...?
Slide 14
Slide 14 text
OK…
LET’S GO!
Slide 15
Slide 15 text
HOW A WEB
PAGE LOADS
Slide 16
Slide 16 text
HTML
CSS
JAVASCRIPT
IMAGES
FONTS
ANALYTICS
Slide 17
Slide 17 text
Chrome Docs:
https://developers.google.com/web/tools/
chrome-devtools
Advanced Tips:
https://umaar.com/dev-tips/
Useful follow:
@ChromeDevTools
USEFUL NOTES
Slide 18
Slide 18 text
Cmd-Option-I / F12 / Ctrl-Shift-I = Open
Cmd-Shift-P/Ctrl-Shift-P = Commands
Cmd-Shift-D/Ctrl-Shift-D = Toggle position
Escape = Toggle drawer (extra stuff!)
https://developers.google.com/web/tools/chrome-
devtools/shortcuts
USEFUL NOTES
Slide 19
Slide 19 text
GO AND
PLAY!
Thanks for having me.
Ross Wintle
@magicroundabout