Almost every developer has Chrome DevTools open for hours a day. And almost every developer is only touching a fraction of what it can actually do.
Beyond the Elements and Console tabs you already know well, DevTools quietly ships with a command palette, a built-in screenshot tool, network throttling, live page editing, persistent local overrides, and a lot more that never makes it into anyone's daily workflow.
Here are 20 tricks that can genuinely speed up how you debug and build.
1. Open the Command Palette
DevTools has its own version of VS Code's command palette. Hit Ctrl+Shift+P (Cmd+Shift+P on Mac) while DevTools is open, and you can search for almost any feature — screenshots, themes, panels, sensors — by name, instead of hunting through menus. Once you get used to it, clicking through tabs starts to feel slow.
2. Capture a Full-Page Screenshot Without an Extension
Open the command palette, type screenshot, and pick Capture full size screenshot. DevTools scrolls and stitches the entire page into a single PNG automatically.
Need just one element instead? Use Capture node screenshot from the same menu.
3. Force :hover, :focus, and Other Element States
Trying to screenshot or debug a hover style without your mouse drifting off the element is annoying. In the Elements panel, select the element, open the Styles tab, and click :hov. You can lock in :hover, :focus, :active, :visited, or :focus-visible and style it at your own pace.
4. Make the Whole Page Editable
Drop this into the Console:
document.designMode = 'on'
The entire page becomes an editable canvas — click anywhere and type. Great for swapping in real copy over placeholder text before a screenshot, or quickly mocking up a content change without touching the actual source.
5. Reference the Selected Element With $0
Whatever you last selected in the Elements panel is automatically available in the Console as $0 — no need to re-select it or write a new query selector. Type $0 to inspect it, read its properties, or call methods on it directly.
DevTools keeps a short history too: $1, $2, $3, and $4 reference your four previous selections, which makes hopping between elements while debugging much faster.
6. Pretty-Print Minified Files
Stop pasting minified JS or CSS into a third-party formatter. Open the file in the Sources panel and click the {} icon at the bottom — DevTools reformats it in place, instantly.
7. Throttle Your Network
In the Network panel, open the No throttling dropdown and pick Slow 3G, Fast 3G, or build a custom profile. It's the fastest way to see how your site actually behaves for someone on a bad connection, before your users find out for you.
8. Block a Specific Request
Right-click any request in the Network panel and choose Block request URL. DevTools will block that resource on every reload from then on — perfect for testing how your app handles a failed API call, a missing font, or a third-party script going down, without touching a line of code.
9. Cycle Through Color Formats
Click the color swatch next to any CSS color value to open the picker as usual. But Shift+click the swatch instead, and DevTools cycles the value through HEX, RGB, HSL, and HWB for you — no external converter needed.
10. Nudge CSS Values With Your Keyboard
Click any numeric value in the Styles panel, then:
-
↑/↓— step by 1 -
Shift + ↑/↓— step by 10 -
Alt + ↑/↓— step by 0.1
Fine-tuning spacing, font sizes, or border radius gets a lot faster once this is muscle memory.
11. Find Unused CSS and JavaScript
Open the Coverage panel (under More tools), hit record, then use the page normally. DevTools reports exactly how much of each CSS and JS file actually got used — and how much didn't — which is a fast way to spot dead code worth trimming.
12. Emulate Any Device
Press Ctrl+Shift+M to open Responsive Design Mode. You get preset devices, custom screen sizes, and control over device pixel ratio. Need to test against a phone that isn't in the preset list? Click Edit and add it as a custom device.
13. Force Dark or Light Mode Without Changing Your OS
Click the brush icon in the Styles panel toolbar to open Rendering Emulations, then toggle prefers-color-scheme between light and dark on the fly — no need to actually switch your system theme to check both.
14. Copy CSS, Selectors, or JS Paths for Any Element
Right-click an element in the Elements panel and hover Copy to see your options:
- Copy styles — every computed CSS rule applied to it
- Copy selector — a unique CSS selector for it
-
Copy JS path — the matching
document.querySelector(...)call
All three save real time when you're wiring up a script or reporting a bug.
15. Record a Performance Timeline
Open the Performance panel and hit record while you interact with the page. You'll get a full timeline of JavaScript execution, layout, and paint work. Long tasks show up highlighted in red — that's usually exactly where your jank is coming from.
16. Run a Lighthouse Audit Without Leaving DevTools
The Lighthouse panel is built in. Click Analyze page load and get scored reports on Performance, Accessibility, Best Practices, and SEO, complete with specific fixes — no extension required.
17. Use Local Overrides to Make Edits Stick
Normally, anything you change in DevTools disappears on reload. Local Overrides fixes that: go to Sources → Overrides, enable it, and pick a local folder. From then on, your edits to CSS or JS files persist across reloads by serving your local copy instead of the network version — until you switch Overrides back off.
18. Track Values With Watch Expressions
In the Sources panel, add a Watch Expression for something like user.id, items.length, or this.state. DevTools keeps it updated automatically every time execution pauses at a breakpoint, so you're not constantly hovering over variables or sprinkling console.log() everywhere.
19. Drag and Drop Elements in the DOM
In the Elements panel, you can grab any element and drop it somewhere else in the tree — the page updates live as you move it. It's a fast, no-code way to test a different layout order or see what happens if a section sits somewhere else.
20. Copy a Request as fetch() or cURL
Right-click any request in the Network panel, hover Copy, and you'll find Copy as fetch, Copy as Node.js fetch, and Copy as cURL. DevTools turns the exact request — headers, method, body, and all — into ready-to-run code you can paste straight into a script, a terminal, or an API client like Postman.
It's the quickest way to reproduce a real request outside the browser when you're debugging an API call or handing a repro case to someone else.
That's the list. Even picking up two or three of these — the command palette and local overrides are usually the biggest wins — tends to change how much of DevTools you actually reach for day to day.
At ArtClick, we build fast, scalable WordPress websites, company websites and custom web systems that balance design, performance and long-term maintainability. Whether you're starting from scratch or improving an existing platform, we'd love to help.
Top comments (0)