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