Save 37% off PRO during our Black Friday Sale! »

(Developer) Tools - The Amazing Toolkit Inside Your Browser

28519fc7c37998eea059b525da5fc7ce?s=47 Ross Wintle
November 08, 2017

(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.

28519fc7c37998eea059b525da5fc7ce?s=128

Ross Wintle

November 08, 2017
Tweet

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