Browser Inspector: Your Guide to Chrome, Firefox & Co – Right Inside the DevTools.

Learn how to really use your browser’s developer tools: from HTML & CSS inspection to network analysis, performance, cookies, storage, and more.

Who Is This For?

This site is for you if:

You build websites and only use “Right click → Inspect” but want to finally understand what you’re seeing.
You work with CMSs like Joomla or Drupal and need to debug layout or JavaScript issues.
You care about performance and want to know what really slows a page down.
You’re just curious and love hidden features, easter eggs and “Oh wow, I didn’t know DevTools could do that!”

What You Can Learn Here

Elements & Styles
Inspect HTML, debug CSS, use layout tools (Flexbox/Grid overlays).
Console
Understand errors, use console.log, run small snippets right inside the browser.
Accessibility (a11y)
Use built-in accessibility tools to inspect landmarks, headings, contrast, ARIA attributes and keyboard focus. Learn how to spot common problems (like missing alt text, low contrast or broken focus order) and fix them directly with the inspector.
Network
See all requests, analyze XHR/Fetch, status codes, HTTP/2/3, timing and server responses.
Performance
Measure load time, read waterfall charts, spot rendering and layout issues.
Storage & Cookies
Inspect cookies, LocalStorage, SessionStorage, IndexedDB and caching behavior.
Mobile & Responsive
Use device emulation, throttling, touch simulation and test mobile layouts.
Easter Eggs & Fun
Hidden features, little hacks, helpful shortcuts, and dev jokes.

Browser-Specific Guides

The default for many developers. Includes Lighthouse, Recorder, great JS debugging.

Strong CSS tools (especially Grid and Flexbox), accessibility views, visual layout helpers.

Essential for debugging on iOS and macOS. Some UI differences, slightly different defaults.

Common Use Cases

Browse all use cases