Upgrade to Pro — share decks privately, control downloads, hide ads and more …

(Developer) Tools - The Amazing Toolkit Inside Your Browser

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.

Ross Wintle

November 08, 2017
Tweet

More Decks by Ross Wintle

Other Decks in Programming

Transcript

  1. (DEVELOPER)
    TOOLS
    THE AMAZING TOOLKIT IN YOUR BROWSER
    Ross Wintle
    @magicroundabout

    View full-size slide

  2. INSIDE YOUR
    BROWSER IS...

    View full-size slide

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

    View full-size slide

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

    stuff on your screen?

    View full-size slide

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

    View full-size slide

  6. DEVELOPER
    TOOLS

    View full-size slide

  7. IT SHOULDN’T BE CALLED
    DEVELOPER TOOLS

    View full-size slide

  8. I’M NOT A
    MECHANIC

    View full-size slide

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

    View full-size slide

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

    you can do yourself

    View full-size slide

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

    View full-size 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 full-size slide

  13. OK…

    LET’S GO!

    View full-size slide

  14. HOW A WEB
    PAGE LOADS

    View full-size slide

  15. HTML
    CSS
    JAVASCRIPT
    IMAGES
    FONTS
    ANALYTICS

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide