Category: Browser Tools

This is a follow up on our previous firefox post so if you haven’t already read it check here for any questions. That is more of a detailed guide that can be used with chromium browsers as well with the key differences being noted below.

• CSS Grid & Flexbox visualization
  • Firefox: stronger, more detailed Grid and Flexbox highlighters (interactive overlays, gap/line labels)
  • Chromium: good visualizers but generally less feature-rich for grid diagnostics
• Layout & box-model UX
  • Firefox: clearer box-model inspector and overlay controls for spacing troubleshooting
  • Chromium: similar capabilities but different UI placement and terminology
• Performance tooling & profiler UI
  • Firefox: comparable profiling features with different visualizations and emphasis on paint/layout diagnostics
  • Chromium: integrated Lighthouse and early experimental features, flame charts and profiler UX differ
• Memory tools
  • Firefox: robust heap snapshot and retainers view focused on DOM detachment patterns
  • Chromium: allocation instrumentation and allocation profiler with different workflows for tracking leaks
• Issues / centralized warnings
  • Firefox: reports many issues via Console and Security panels but lacks identical centralized Issues UI
  • Chromium: built-in Issues panel aggregating CSP, deprecations, mixed content etc
• Rendering diagnostics (paint/layers)
  • Firefox: paint flashing, layer borders and compositing tools with different visualization strengths
  • Chromium: comparable rendering tools and an FPS meter, implementations and visuals differ
• Early experimental features
  • Firefox: may lag on some experiments but offers unique UX strengths for CSS/layout.
  • Chromium: often receives experimental DevTools features earlier (and integrates Lighthouse)
• Framework/extension ecosystem
  • Firefox: supports major framework devtools but fewer third‑party DevTools extensions overall
  • Chromium: broader extension availability (React/Vue tools, Lighthouse extension, many DevTools extensions)
• Remote debugging UX
  • Firefox: about:debugging for remote devices; comparable but different workflow.
  • Chromium: chrome://inspect for Android and a large ecosystem of remote/debugging tools
• Default privacy/telemetry posture
  • Firefox: generally more privacy-forward in defaults (affects telemetry and some DevTools integrations)
  • Chromium: more integrations and telemetry options enabled by default in many builds
• UI/interaction differences (short list)
  • Panels naming: Elements (Chromium) vs. Inspector (Firefox)
  • Device Mode (Chromium) vs. Responsive Design Mode (Firefox): similar features, different controls
  • Console toggling and shortcuts are mostly the same but some keybindings and menu placements differ

Using both Chromium based browser and Firefox tools together

Use both toolchains when diagnosing cross‑browser issues. If you reproduce in both you can catch engine-specific rendering, layout or JS differences.

For example you can use the Elements/Inspector panels to compare computed styles, box‑model overlays and Grid/Flexbox highlighters to spot layout differences; toggle and edit CSS live in each to see engine‑specific rendering.

Capture network activity and HARs from both browsers to compare request timing, caching headers, and resource sizes, then run performance recordings (flame charts in Chrome, Performance/paint diagnostics in Firefox) to identify different long‑tasks, layout thrashing or paint costs.

Take heap snapshots or allocation profiles in each to detect memory leaks that may manifest differently across engines.

Run accessibility audits (Lighthouse in Chrome and the Accessibility Inspector in Firefox) and validate with a screen reader to surface divergent ARIA or focus issues.

Finally, reproduce fixes in both browsers and retest in Device/Responsive modes and on real devices via remote debugging (chrome://inspect and about:debugging) to ensure cross‑browser consistency.

Resources and links

• Chrome DevTools docs: https://developer.chrome.com/docs/devtools/

Why inspect a page?

• Debugging: find broken DOM, CSS specificity issues, JS errors
• Performance: spot slow network requests, heavy scripts, memory leaks
• Accessibility & SEO: verify semantic markup, ARIA, headings and meta tags
• Learning & reverse‑engineering: understand layout patterns, CSS tricks and JS behavior
• Rapid prototyping: live-edit HTML/CSS and test fixes without redeploying

How to open Developer Tools

• Keyboard shortcut: F12 or Ctrl+Shift+I (Cmd+Opt+I on macOS)
• Right‑click any element → Inspect Element
• Menu: Tools → Web Developer → Web Developer Tools
• Remote: about:debugging → Connect to device / Firefox instance

Overview of built‑in DevTools

• Inspector (Page Inspector)
  • View/edit DOM and CSS rules, computed styles, box model and layout
  • Use: layout bugs, specificity problems, CSS experiments
  • Features: element picker, rule search, style editing, box model overlays, CSS variables preview
• Box Model & Layout tools
  • Visual margins/padding/border overlays; Grid and Flexbox highlighters
  • Use: debug spacing, alignment, grid gaps
• Fonts panel
  • See used webfonts, font-face declarations, fallback chain, line-height, weight
  • Use: typography debugging and license checks
• Animations inspector
  • Timeline for CSS and Web Animations API; scrub, replay, slow motion
  • Use: debug timing and easing, capture frames
• Web Console
  • Logs, errors, warnings, network messages, DOM exceptions, CSS warnings
  • Execute JS in page context, inspect objects and elements
  • Use: quick evaluation, console.table, saving logs
• JavaScript Debugger
  • Set breakpoints (line, conditional, XHR/fetch), step through, watch expressions, examine call stack and scopes
  • Use: tracing runtime bugs, async stack traces, break on exceptions
• Network Monitor
  • Full request/response view, timings (DNS/connect/TLS/TTFB), size, initiator, priority, headers, preview/response body, throttling
  • Use: asset optimization, caching issues, API debugging
• Performance (Profiler)
  • Record frames, JavaScript CPU usage, paint/layout events, call trees, flame charts
  • Use: find code hotspots, layout thrashing, long tasks causing jank
• Memory
  • Heap snapshots, allocation stacks, retainers, detect leaks and high memory objects
  • Use: reduce memory bloat, track closures holding DOM
• Storage / Application panel
  • Inspect cookies, localStorage, sessionStorage, IndexedDB, Cache Storage, service workers
  • Use: debug auth, caching strategies, stale content
• Responsive Design Mode
  • Emulate device viewports, DPR, touch, UA, and network throttling
  • Use: visual QA across screen sizes and simulated slow connections
• Accessibility Inspector
  • Accessibility tree, computed name/role/state, contrast checker, ARIA properties
  • Use: compliance checks, screen reader troubleshooting
• Security
  • TLS/HTTPS status, mixed content, certificate info
  • Use: detect insecure resources and certificate issues
• Application Security & Permissions
  • Inspect permissions, feature policy, CSP violations in console
• Performance Tools for Graphics & Layers
  • Paint flashing, layer borders and frame-rate diagnostics for heavy animations

Tips and tricks

• Use Ctrl/Cmd+F in Inspector to search HTML/CSS
• Right‑click a rule → Copy → Copy Rule or Copy Declaration to transfer fixes
• Use “Toggle Element State” to force :hover/:active/:focus states for testing
• Pin frequently used panels (three‑dot menu → Settings → Toolbox) to keep your layout
• Use multi‑selection (Shift/Ctrl) in Console for batch operations
• Persist logs across reloads (Console “Preserve log”) when debugging redirects or service worker registrations
• Throttle network to Slow 3G to surface timing bugs and lazy load problems early
• Use the “Disable Cache” option (Network panel) while DevTools is open to bypass cache during reloads
• Use pretty-print and source maps in Debugger for minified code
• Use conditional breakpoints to avoid noisy stepping in loops
• Use “Break on attribute mutation” or “Break on subtree modifications” in Inspector for dynamic DOM problems
• Use the “Take screenshot” and “Capture node screenshot” options in the Inspector for image assets or bug reports

Useful built‑in workflows

• Audit large page loads: open Network → sort by size/time → identify big assets → compress/serve smaller formats (WebP/AVIF), lazy load images and implement HTTP caching headers
• Find memory leaks: take two Heap snapshots before/after action, diff the snapshots and inspect retained DOM nodes and detached elements
• Speed up time‑to‑interactive: record Performance while loading, inspect long tasks and paint/layout recalc events, prioritize code splitting and defer non‑critical work

Add‑ons and external tools that pair well with Firefox DevTools

Extension	Adds / Purpose	Use Cases
Web Developer (by Chris Pederick)	Extra toolbar of DOM/CSS utilities (disable styles, outline elements, forms tools)	Quick diagnostic actions and mass toggles
React Developer Tools	Inspect React component tree, props, state, hooks	Debug React structure and performance; integrates with DevTools profiler
Vue.js Devtools	Vue component inspector, performance	Vue SPA debugging and state inspection
Redux DevTools	Time‑travel debugging for Redux stores	For Redux-driven apps to replay actions and inspect state
Wappalyzer	Detect tech stack, frameworks, libs used	Quick reconnaissance and dependency checks
Lighthouse (via extension or CLI)	Automated performance/accessibility/SEO audits	High-level audits and actionable suggestions
ColorZilla / Eyedropper	Pick colors from the page and create palettes	Visual QA and color checks
HTTP Header Live / Modify Headers	View/modify request headers on the fly	Test CORS, security headers, feature detection
LiveReload / BrowserSync (local dev)	Auto-refresh and synced testing across devices	Rapid local development iteration
CSS Peeper	Read styles, fonts, assets in a friendly UI	Fast style extraction for design handoff

Note: many capabilities (network, console, accessibility) already exist in DevTools. Some extensions mainly add framework-specific inspection, recon tools or UI conveniences

Accessibility and testing considerations

• Use the Accessibility Inspector to surface missing labels, roles and improper semantics
• Use color contrast tool in Accessibility panel. Fix low contrast by adjusting foreground/background or font weight
• Use keyboard testing (Tab order inspector) to ensure logical focus flow
• Test with a screen reader (NVDA/VoiceOver) where possible, the Accessibility Inspector helps but should not replace real assistive tech

Advanced topics & workflows

• Remote debugging: connect Firefox on Android or another desktop instance via about:debugging → connect and debug pages on the device
• Source maps & transpiled code: enable source maps in Debugger settings to step through original TypeScript or transpiled code
• Automating checks: combine Lighthouse, Puppeteer or Playwright tests to run performance/accessibility checks in CI
• Custom DevTools extensions: build an extension for a bespoke workflow (see “Extending DevTools” in Firefox docs)
• Network recording for reproducible bug reports: export HAR from Network Monitor to share with teammates

Common pitfalls and how to avoid them

• Caching hides changes, use “Disable cache” while DevTools is open
• Minified code without source maps, enable source maps or generate them in your build
• Over-reliance on developer mode alone — cross‑check in real devices and browsers

Resources and Official Docs

• Firefox DevTools docs: https://firefox-source-docs.mozilla.org/devtools/
• Lighthouse (audits): https://developers.google.com/web/tools/lighthouse