brand image

Chrome DevTools: Treasure (Overview)

tl;dr

The Chrome DevTools are a neat collection of tools for the daily work as a web developer. If you're lucky, you'll maybe find some handy stuff in here.

Analysing

  • Frontend Performance Issues
  • Rendering Performace

Breakpoints

  • Breakpoints on HTML Elements
  • Event Listener Breakpoints

Debugging

  • Browser debugging tricks
  • Remote Debugging on Android
  • Access DevTools via CLI
  • Store Element in Global Variable
  • Device Sizing And Network Throttling
  • Throttle CPU
  • Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools

Source

  • Chrome Developers Show archive.org snapshot
  • Chrome Developers Blog Show archive.org snapshot
  • Chrome Developers Articles Show archive.org snapshot
  • Chrome Developers Videos Show archive.org snapshot

Varia

  • Auto-open DevTools for popups
  • List Registered Event Listeners
  • Shortcuts
  • Fast Navigation Tips in Dev Tools

Tip

Feel free to extend this list of Chrome DevTools resources.

Julian 2022-11-08
This website uses short-lived cookies to improve usability.
or learn more