(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. 4.
  2. 10.

    LIKE UNDER THE BONNET OF A CAR There are things

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