|

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

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)