Most developers open DevTools, poke around the Elements panel, and close it. That is a shame, because the browser is quietly one of the best debugging environments ever built — and the parts that matter are not the ones you see on your first day. Here are the features our team reaches for constantly, and why they keep earning their keep.
Local Overrides: Edit Production Without Touching Production
Local Overrides is the single feature that changes how we work with client sites. It lives in the Sources panel under the Overrides tab. You pick a folder on your disk, DevTools saves modified files there, and every future request for those URLs is served from your local copy instead of the server.
What this means in practice: we can load a client's live site, tweak a CSS rule, and see the change persist across reloads without deploying anything. Product wants to see a hero headline shrunk by 20%? We show them the exact change on their real site in five minutes. When everyone agrees, we turn the override into an actual commit.
This is also the fastest way to debug a bug report. If a customer says "the button looks wrong on my end," we can reproduce their state, save an override with our proposed fix, and hand them a link to confirm — all before writing a line of real code.
Request Blocking and Network Throttling
Our clients sit all over the country and a lot of them still run on patchy mobile data. Testing a site on gigabit fiber from a Glendale office tells you nothing about how it feels on a weak LTE signal in the middle of a meeting. The Network panel's throttling dropdown solves that.
Chrome's throttling presets have gotten noticeably more accurate in the last year. The built-in 3G and slow connection profiles now factor in packet loss and realistic round-trip times instead of just capping bandwidth. Custom profiles let us match whatever a client's actual analytics say about their audience.
Pair that with Network request blocking — available from the Network panel's three-dot menu — and you can ask a different question entirely: what happens when a third-party script fails? Block the tag manager. Block the font provider. Block the chat widget. If the site turns into a broken mess, that is a fragility worth fixing. We have shipped more than one refactor on the back of what that single panel revealed.
The Rendering Panel
The Rendering panel is hidden behind the three-dot menu, under More tools. It is where the diagnostic tools live that most developers never touch.
Paint Flashing
Paint flashing highlights any part of the screen that repaints, in green. Scroll a page with this on and you immediately see which elements are forcing the browser to redraw unnecessarily. Fixed headers that repaint the entire viewport on every scroll are a surprisingly common finding.
Layout Shift Regions
This one overlays a blue rectangle on anything that shifts during a navigation. Cumulative Layout Shift is a Core Web Vitals metric and a ranking factor, and it is usually caused by images without dimensions, web fonts swapping in, or ads injecting late. Turn on layout shift regions and the culprits light up without guesswork.
Core Web Vitals Overlay
The same panel has a Core Web Vitals toggle that shows Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift as a live overlay. It is the quickest way to confirm a fix worked before running a full Lighthouse audit.
The Console Is Not Just for console.log
A few Console features that punch above their weight:
$0through$4— references to the last five elements inspected in the Elements panel. Great for grabbing an element without writing a selector.$$('selector')— shorthand fordocument.querySelectorAllthat returns a real array, not a NodeList, so you can.map()or.filter()directly.copy(variable)— copies any object, array, or string to your clipboard as JSON. Invaluable for capturing API responses mid-debug.- Live expressions — click the eye icon to pin an expression that re-evaluates continuously. We use it to watch the size of an array, the value of a form field, or the current scroll position while we work.
Conditional Breakpoints and Logpoints
Right-click a line number in Sources and you get two options most developers skip. A conditional breakpoint pauses only when an expression is truthy — perfect for that one rogue record in a loop of two thousand. A logpoint logs a message without pausing at all, and crucially, without adding a console.log to the source code that you will forget to remove.
Logpoints are the right answer for "I want to know what this variable looks like in production" when editing and redeploying is not practical. They live entirely in the browser and vanish when you close DevTools.
Coverage: What Code Is Actually Running
The Coverage panel, also under More tools, records how much of every loaded CSS and JavaScript file your page actually uses. Load a page, interact with it normally, and you will often find that 60–80% of the CSS never applies to anything visible. On WordPress sites in particular, this is the single best way to identify plugins shipping stylesheets and scripts on every page for no reason.
Coverage does not automatically tell you what to remove — some of that unused code runs on other pages — but it gives you a starting point that is objective instead of guesswork. Pair it with our WordPress maintenance process and the bloat disappears quickly.
Device Emulation Beyond Screen Size
The device toolbar does more than just resize. Open the three-dot menu inside it and you can add a user agent header, throttle the CPU to 4x or 6x slower than your machine, and simulate specific hardware concurrency values. A site that feels snappy on an M3 MacBook can crawl on a four-year-old Android phone, and CPU throttling is the closest approximation to that experience you can get without owning the hardware.
Takeaway
None of these features are hidden — they are all one or two clicks away in a browser you already have open. The difference between a site that feels polished and one that feels fragile is often just a developer who knows where the diagnostic tools live and uses them before shipping.
If your site has accumulated years of third-party scripts, unused CSS, or mysterious layout shifts and you would rather someone else dig through it, that is exactly the kind of work our web development team does every day. Get in touch and we will take a look.