Shortcut (Primarily Firefox)

• Use F12 to open the DevTools of a browser.
• Responsiveness Design Mode: Ctrl + Shift + M (switch between mobile and desktop mode)
• Right clicking an object on the page and clicking "Inspect" will open the DOM Inspector focusing on that HTML element
• (Chrome-only) Command Menu/Palette: Ctrl + Shift + P

Network

Emulating network conditions

• Caching - disabling cache forces browser to download tall webpage resources every time
• Network throttling - Simulate slower networks like 2G or 3G or simulate being offline
• User agent - Change the user agent string to any number of browser user agents

DOM Inspection

• Inspector (Firefox) - allow us to see the DOM tree of a webpage
• Useful to see what CSS properties the element is inheriting or overriding
• Also allow us to edit the CSS of the elements
• Able to change state of elements (active, hover, focus, visited)

Sources Tab (Chrome-only)

• Under the "Filesystem" sub-tab, we can click on the option to add our root folder to the DevTools workspace and link the files

Coverage (Chrome-only)

• The Coverage tab can be found under the Kebab menu > "More Tools"
• After hitting the record button, Coverage will show how many unused CSS and JS bytes in the page

Sensors (Chrome-only)

• The Sensors tab can be found under the Kebab menu > "More Tools"
• It allow for simulation of GPS location and accelerometer data