Browser DevTools Guide
The browser developer tools are the most powerful instrument a frontend developer owns, and most people use a fraction of them. This is a guided tour of the panels that matter for building and debugging interfaces, organised by what each one answers: what is on the page, what the code is doing, what is loading, where time goes, what the browser is repainting, and what is unused. The focus is the panels relevant to rendering and performance work on this site.
Every panel below is in Chrome and, with different names, in Firefox and Safari.
What you'll learn
Elements and the DOM
The Elements panel shows the live document, not your source, which is the key distinction.
Inspecting the rendered DOM
The Elements panel displays the DOM as it currently exists after JavaScript has run, so it reflects the rendered page rather than the original HTML. This matters for JavaScript SEO, since it shows roughly what a rendering crawler sees, a point in JavaScript rendering and indexing. The Styles pane beside it shows which CSS rules apply and which are overridden.
The Console
The Console is for running code and reading what the page reports.
Logging, errors, and live evaluation
Beyond reading errors, the Console lets you run JavaScript against the live page, inspect variables, and time code with console.time, the technique used in the rendering example. Console errors also count against the Best Practices score in audits, so a clean console is worth maintaining.
The Network panel
The Network panel reveals everything the page loads and how long each takes.
Seeing what loads and when
It lists every request with its size, timing, and order, and the waterfall view shows what blocks what. Throttling to a slower connection here reproduces the experience of users on poor networks, which is essential for honest performance testing. Render-blocking resources, discussed in that article, are visible as requests that delay first paint.
The Performance panel
When a page feels slow, the Performance panel shows exactly why.
Profiling where time goes
Recording a profile captures scripting, rendering, painting, and layout over time, so you can see whether a slow frame is caused by heavy JavaScript or by layout work. It is the tool that turns a vague sense of slowness into a specific cause, the measurement step in the frontend performance roadmap.
The Rendering tab
A lesser-known panel that visualises what the browser is actually repainting.
Watching paints and layout shifts
The Rendering tab can highlight painted regions, show frame rate, and flag layout shifts as they happen. Enabling paint flashing reveals areas being repainted unnecessarily, a direct way to spot the layout thrashing fixed in the browser rendering example. It makes invisible rendering work visible.
Coverage and Lighthouse
Two tools for finding waste and getting an overall score.
Unused code and an overall audit
- The Coverage panel · reports how much of your CSS and JavaScript actually runs on a page, exposing dead code worth removing to cut loading cost.
- The Lighthouse panel · runs a full audit of performance, accessibility, best practices, and SEO from inside DevTools. See performance monitoring tools for related options.
Frequently Asked Questions
Does the Elements panel show my source code?
No, it shows the live DOM as it exists after JavaScript has run, which can differ from your original HTML. This is useful for SEO because it roughly reflects what a rendering crawler sees.
How do I find what is making a page slow?
Record a profile in the Performance panel. It captures scripting, rendering, painting, and layout over time, so you can see whether slowness comes from heavy JavaScript or from layout work.
How can I see what the browser is repainting?
Use the Rendering tab and enable paint flashing, which highlights regions being repainted. Areas flashing unnecessarily indicate wasted rendering work, often caused by layout thrashing.
How do I find unused CSS and JavaScript?
Use the Coverage panel, which reports how much of each file actually runs on the page. The unused portion is dead code you can often remove to reduce loading cost.
Read next: performance monitoring tools, or the Resources hub.
Optimizing performance?
The performance roadmap shows how to use these panels in order.
Read: Frontend Performance Roadmap →