# web browser debugging
Elements - you can browse and click through each of the DOM elements and see what styles are applied to them.
- Element selector/ right click inspect
- Turn styles on/off
- Add more styles
- Delete DOM elements
- :hov to toggle element states
- .cls edit element classes
- Command + Click variable to see where it is declared
- Computed tab
- Toggle device/screen size button
- Full screenshot capture - command+shift+p -> screenshot
Sources
- Unminify
- Breakpoints
Console
- Live expressions eg: date.now(), window.scrollY, document.activeElement
- A11ytab chrome extension
- console.warn / console.error / console.table
Network
- Throttling
- Disable cache (304 code)
- Fetch requests - preview
Application
- Local and session storage
- Cookies
Lighthouse
- performance reports
- Accessibility info
- Best practices
Misc
- Darkmode command + shift +p > dark
- DesignMode - console > document.designMode = “on”