(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
   

   View Slide

2. INSIDE YOUR
   BROWSER IS...
   

   View Slide

3. INSIDE YOUR
   BROWSER IS...
   a magical fairy wonderland...?
   

   View Slide

4. INSIDE YOUR
   BROWSER IS...
   a ton of clever code that draws

   stuff on your screen?
   

   View Slide

5. INSIDE YOUR
   BROWSER IS...
   a super-useful toolkit that not
   everyone knows about?
   

   View Slide

6. DEVELOPER
   TOOLS
   

   View Slide

7. IT SHOULDN’T BE CALLED
   DEVELOPER TOOLS
   

   View Slide

8. I’M NOT A
   MECHANIC
   

   View Slide

9. LIKE UNDER THE
   BONNET OF A CAR
   There are things you can do yourself
   

   View Slide

10. LIKE UNDER THE
    BONNET OF A CAR
    There are things you think

    you can do yourself
    

    View Slide

11. LIKE UNDER THE
    BONNET OF A CAR
    There are things you pay an
    expert to do
    

    View Slide

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
    

    View Slide

13. WHO IS...?
    

    View Slide

14. OK…

    LET’S GO!
    

    View Slide

15. HOW A WEB
    PAGE LOADS
    

    View Slide

16. HTML
    CSS
    JAVASCRIPT
    IMAGES
    FONTS
    ANALYTICS
    

    View Slide

17. Chrome Docs:
    https://developers.google.com/web/tools/
    chrome-devtools
    Advanced Tips:
    https://umaar.com/dev-tips/
    Useful follow:
    @ChromeDevTools
    USEFUL NOTES
    

    View Slide

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
    

    View Slide

19. GO AND
    PLAY!
    Thanks for having me.
    Ross Wintle
    @magicroundabout
    

    View Slide