Tags: web-dev concept

DevTools

Date: 2026-08-17

---

The panels worth real fluency, as opposed to the ones everyone already uses. Most developers live in Console and Elements; the diagnostic value is concentrated in Network, Performance, Coverage and Rendering, and each answers a question the others can’t.

---

DevTools are the inspection, debugging and profiling tools built into every major browser, opened alongside the page they examine.

Network

Beyond “did the request work” — the columns that carry diagnosis:

Priority        what the browser thought mattered.
                the LCP image at Low is the finding — Priority Hints

Waterfall       hover it for the breakdown:
                  queueing · stalled · DNS · TLS · request sent
                  · WAITING (TTFB) · content download
                a long WAIT is the server; a long DOWNLOAD is the file
                — Time to First Byte

Size / Transfer two columns. transfer is compressed, size is decoded.
                identical values mean COMPRESSION ISN'T APPLIED
                — Compression

Initiator       what caused this request. the fastest way to find
                which third-party script pulled in another one

Two rows repay a second look: an identical Size and Transfer means Compression isn’t applied, and a long wait before the download starts is Time to First Byte rather than a slow file. The Priority column is where a mis-prioritised hero image shows up — Priority Hints.

Settings worth having on permanently: disable cache while open, and a throttling profile that isn’t “No throttling” — your fibre connection is not your customers’ — Field vs Lab Data.

Blocking is the underused feature. Right-click a request → block, then reload: an instant, honest measurement of what a third party costs you. Far more persuasive in a meeting than an estimate — Third-Party Scripts.

Performance

The panel that answers why something is slow, and the one people avoid because the flame chart looks intimidating.

what to read, in order

1  the SCREENSHOT filmstrip     when did the user see something?
2  LONG TASKS                   red-cornered blocks over 50ms.
                                these are your interaction problems
                                — Long Tasks and Blocking
3  the CALL TREE, bottom-up     sort by self time. the function
                                actually burning the milliseconds
4  LAYOUT SHIFT markers         what moved, and what caused it
                                — Cumulative Layout Shift
5  the MAIN THREAD track        gaps are good. solid colour is not

Rows 2 and 4 map onto notes worth having open alongside: Long Tasks and Blocking for the red-cornered blocks, and Cumulative Layout Shift for the shift markers.

Record an interaction, not just a load. Most INP problems don’t appear in a page-load trace — click the thing that feels slow while recording, and look at what runs between the input and the next paint — Interaction to Next Paint.

Coverage

Shows what proportion of each CSS and JavaScript file actually executed. Almost nobody opens it, and on a first run it is reliably alarming.

typical first look at a product page

app.js       412 KB    68% unused
vendor.js    280 KB    81% unused
styles.css    94 KB    89% unused

Unused ≠ deletable — some of it runs on interaction or on other routes. But it’s the fastest way to find a library loaded on every page and used on one, which is the clearest Code Splitting signal available — Bundle Analysis.

Rendering

A panel of overlays, hidden behind the three-dot menu, each of which visualises a class of problem:

Paint flashing              green rectangles on every repaint.
                            a whole page flashing on scroll is the finding

Layout shift regions        blue overlay when something moves

Layer borders               what's been promoted to the compositor.
                            too many layers is a memory problem
                            — Compositing and Layers

Frame rendering stats       live FPS while you interact

Emulate prefers-reduced-motion / prefers-color-scheme / forced-colors
                            ← testing accessibility settings without
                              changing your OS — Reduced Motion

Emulate vision deficiencies ← check a colour-coded UI is still readable
                              — Colour Contrast

The layer-borders overlay is the one to reach for when scrolling is janky — too much promoted to the compositor is its own problem — Compositing and Layers. The emulation toggles cover two accessibility settings worth testing deliberately: Reduced Motion and Colour Contrast.

Elements, past the obvious

• The Accessibility pane shows the computed accessibility tree for the selected element — the name, role and states actually reported, rather than the attributes you wrote. The fastest way to verify ARIA does what you intended — The Accessibility Tree, ARIA
• Computed styles, with “show all”, and the arrow next to each value that jumps to the winning rule. Ends most cascade arguments — The CSSOM
• Break on DOM change — right-click an element → Break on → subtree modification. When something mutates the DOM and you don’t know what, this finds it in seconds
• Force element state (:hover, :focus-visible, :active) to style states you can’t hold open

Application

Service Workers    update on reload, bypass for network, unregister
                   ← essential while developing, and the fix for
                     "why am I seeing the old version"
                     — Cache API and Service Workers
Storage            cookies with their attributes, localStorage,
                   IndexedDB, cache contents — Client Storage
Clear site data    one button. resets everything for this origin

The Application panel is also where a stale worker gets cleared — Cache API and Service Workers — and where cookies, localStorage and IndexedDB are inspected together — Client Storage.

The habits worth building

• Work in a fresh profile or incognito for anything user-facing. Your extensions and your granted permissions are not representative — Permissions and User Gestures
• Throttle by default. Un-throttled local testing is the reason performance problems reach production
• Use the device toolbar for layout, real devices for behaviour. Emulation gets width right and touch, scrolling and Safari’s quirks wrong
• console.table, console.time, console.count — three that replace a lot of console.log
• Learn one keyboard shortcut: the command menu (Cmd/Ctrl+Shift+P), which reaches every panel and setting by name and removes the need to remember where anything is

The limit worth stating

DevTools measures one run, on your machine, on your connection, with your extensions. It’s a diagnostic instrument, not a measurement of what customers experience — that’s field data. Use DevTools to find out why, and RUM to find out whether — Real User Monitoring, Synthetic Monitoring.

Where it interacts

• Debugging Techniques — the general method; this is the browser-specific toolkit
• Field vs Lab Data — the framing that stops a DevTools number being quoted as a customer experience
• Instrumentation Debugging — the Network panel is where most tracking problems are actually diagnosed
• Accessibility Testing — the Accessibility pane and the Rendering emulations cover a real share of manual checks