- 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
- 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
- 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)
- Under the "Filesystem" sub-tab, we can click on the option to add our root folder to the DevTools workspace and link the files
- 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
- The Sensors tab can be found under the Kebab menu > "More Tools"
- It allow for simulation of GPS location and accelerometer data