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
- Styles – Filter allows for viewing specific CSS states (i.e. :hover)
- 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
- Settings
- 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
