Everything I know about Firefox Devtools

Lets explore about

1. Inspector
2. CSS editor
3. JS Debugger
4. Responsive design mode
5. Network throttling
6. Network Monitoring
7. Firefox Dev edition

Page Inspector

• Inspect elements
• Examine and edit CSS
• Examine and edit HTML
• reposition elements
• View fonts
• Viewing the box model
• visualize transformations
• Using inspector from console
• Inspect Animations
  • http://devtoolschallenger.com/

Style Editor

• Go to tools>web developer> style editor
• Add new css, save the css file, remove the css stylings in your page.

Debugger

• Open debugger
• setting up breakpoint and conditional breakpoint
• pretty-print the source file
• Step through code

Web Console

• Watch out js logs, errors etc.
• view console messages
• Access variables
• Important commands
  • copy, clear, inspect, $0

Scratchpad

• Open scratchpad
  • Tools> Web Developer> Scratchpad
• write your js code
• execute it

Memory Lookup

• Enable Memory Tab
• Take a snapshot
• Examine the memory distribution

Storage Inspector

• Enable Storage Inspector tab
• use console to get and set values in local storage, session storage and indexedDB
• Examine the cookie structure and data

Network monitor

• Enable Network monitor from settings
• study the request params and headers
• expand the json tree view and examine data
• status messages, urls etc.

Few other simple tools

• Eyedropper
• copy command
• Advanced Search

Reference.

• https://www.mozilla.org/en-US/firefox/developer/
• memory tool- https://www.youtube.com/watch?v=DJLoq5E5ww0
• storage inspector- https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
• https://www.youtube.com/watch?v=Pt7DZACyClM
• style editor- https://www.youtube.com/watch?v=7839qc55r7o