Browser Developer Tools

Browser Developer Tools (DevTools) are a built-in suite of debugging and inspection panels available in every modern browser (Chrome, Firefox, Edge, Safari). They let developers inspect the live DOM, edit CSS in real time, debug JavaScript, monitor network requests, and audit performance and accessibility — all without leaving the browser. DevTools are typically opened with F12 or Ctrl+Shift+I (Cmd+Option+I on Mac), or by right-clicking an element and choosing 'Inspect'.

The Elements (or Inspector) panel shows the live, rendered DOM tree alongside the computed CSS box model for the selected element. You can toggle pseudo-classes like :hover, edit styles inline, and see exactly which CSS rule wins per property under the cascade. The Console panel logs JavaScript errors, warnings, and console.log() output, and also acts as a live JavaScript REPL for running arbitrary code against the current page. The Network panel records every HTTP request the page makes, showing status codes, response times, payload sizes, and a waterfall chart — invaluable for diagnosing slow-loading assets or failed API calls. The Lighthouse panel (or standalone CLI) runs automated audits covering performance, accessibility, best practices, and SEO, producing a scored report with actionable recommendations.

In the Elements panel, the Styles sub-pane lists every CSS rule matching the selected element in specificity/cascade order, with overridden (struck-through) rules visible so you can understand exactly why a property has its current value. The Computed sub-pane shows the final resolved value for every CSS property. In the Network panel, requests can be filtered by type (JS, CSS, image, XHR/fetch) and the 'Disable cache' or 'Throttling' options simulate real-world conditions like slow 3G. The Console supports filtering by log level (errors, warnings, info) and preserving logs across page reloads. Lighthouse scores are 0-100 per category; performance scoring weighs metrics like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT).

A typical debugging workflow: open Elements to find and select the misbehaving element, check its Styles/Computed panes to see which rule is responsible for an unwanted look, tweak values live to test a fix, then copy the working CSS into the actual source file (DevTools edits do not persist on reload). For JavaScript bugs, set breakpoints in the Sources panel and step through execution while inspecting variables in the Scope pane. For slow pages, run Lighthouse first to get a prioritized list, then use the Network and Performance panels to drill into specific bottlenecks such as render-blocking CSS or oversized images.