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

More Decks by Ross Wintle

Other Decks in Programming


  1. LIKE UNDER THE BONNET OF A CAR There are things

    you think
 you can do yourself
  2. 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
  3. 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