(Developer) Tools - The Amazing Toolkit Inside Your Browser

These are slides from a talk I gave at the WordPress Cheltenham Meetup on 8th November 2017. The slides themselves aren't much use, except the last few pages which have all the useful links and some of the keyboard shortcuts I used. Most of the talk was a live demo of developer tools.

Transcript

1. (DEVELOPER) TOOLS THE AMAZING TOOLKIT IN YOUR BROWSER Ross Wintle @magicroundabout
2. INSIDE YOUR BROWSER IS...
3. INSIDE YOUR BROWSER IS... a magical fairy wonderland...?
4. INSIDE YOUR BROWSER IS... a ton of clever code that draws
 stuff on your screen?
5. INSIDE YOUR BROWSER IS... a super-useful toolkit that not everyone knows about?
6. DEVELOPER TOOLS
7. IT SHOULDN’T BE CALLED DEVELOPER TOOLS
8. I’M NOT A MECHANIC
9. LIKE UNDER THE BONNET OF A CAR There are things you can do yourself
10. LIKE UNDER THE BONNET OF A CAR There are things you think
 you can do yourself
11. LIKE UNDER THE BONNET OF A CAR There are things you pay an expert to do
12. 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
13. WHO IS...?
14. OK…
 LET’S GO!
15. HOW A WEB PAGE LOADS
16. HTML CSS JAVASCRIPT IMAGES FONTS ANALYTICS
17. Chrome Docs: https://developers.google.com/web/tools/ chrome-devtools Advanced Tips: https://umaar.com/dev-tips/ Useful follow: @ChromeDevTools USEFUL NOTES
18. 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
19. GO AND PLAY! Thanks for having me. Ross Wintle @magicroundabout