WPGR: Learn about the Developer Tools in your browser

Firefox Developer Tools – Topher

• Inspector – look at HTML/CSS behind a web page
  • Responsive Display Mode
• Console – look for errors (security/resource loading issues)
  • Different results depending on when you open – loading vs loaded
• Debugger – for JavaScript
• Style Editor – for changing CSS
• Performance – monitoring page load performance
• Network –
• Storage – Local browser items, page cache, cookies, etc.

Chrome Developer Tools – Brian

• Shortcuts – keyboard commands to open dev tools (CTRL-OPT-I[Mac OS X]/CTRL-SHIFT-I[ChromeOS])
• Docking – SHIFT-CMD-D(Mac OS X) / CTRL-SHIFT-D(Chrome OS)
• Elements (inspector)
  • Styles – Filter allows for viewing specific CSS states (i.e. :hover)
    • Add specific element styles
    • Color Swatch – has a color picker, can save swatches
  • Computed Styles
    • View a visual representation of spacing
    • See the CSS that has been applied
  • == $0 – can be referenced in the Console
• Console
  • Settings
    • Preserve logs – allow you to preserve your console log on page loads
    • Show timestamps
  • Filter – allows you to filter out just the console log entries you are interested in
• Application – web page/site browser storage/cache/etc
• Sources
  • Can reformat sources for browsing (Pretty Print), helps with setting breakpoints
• Network
  • Disable cache – to load all assets fresh to see first load performance
  • Offline – slower connection throttling performance testing, offline asset loading tests
• Performance
  • Runs a profile of a site over a period of time

Tips

• Chrome Dev Tools
  • Delete Key – with undo, add/remove elements with the keyboard
  • Outline: set a 1px overlay board to see the shape of objects
  • Minified files can reference a map file to read the source
  • hackernoon.com

Safari Developer Tools

• Dev tools can inspect what’s running on a mobile device