Chrome DevTools Tips: 10 Features That Save Time

The Chrome DevTools tips that save the most time are: run everything from the Command Menu (Ctrl+Shift+P / Cmd+Shift+P), use console utilities like $0, $$() and copy(), watch values with Live Expressions, edit production files and headers with Local Overrides, throttle and block network requests, read Core Web Vitals live in the Performance panel, emulate devices and locations, record user flows in the Recorder, find dead code with Coverage, and ask the built-in AI assistance panel. Each tip below includes the exact menu path or shortcut as of Chrome in October 2026.

Open DevTools with F12, Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac). This post is about productivity features. For breakpoints, stepping and debugging JavaScript, see our Chrome DevTools debugging guide.

1. Do everything from the Command Menu

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) inside DevTools and type. It opens any panel, toggles settings and runs actions that have no button:

• screenshot: Capture node screenshot (select an element first), Capture full size screenshot (the whole page, not just the viewport), or Capture area screenshot.
• disable javascript: see how the page behaves without JS.
• dark / light: emulate prefers-color-scheme to test your dark theme.
• show coverage, show recorder, show rendering: open panels hidden under More tools.

Also useful: Ctrl+P / Cmd+P opens any loaded file by name in Sources.

2. Use the console utilities

The Console has helpers that only exist inside DevTools (reference):

$0                      // the element currently selected in Elements
$1                      // the one selected before it ($0-$4 keep history)
$$('a[target=_blank]')  // all matches, as a real array (querySelectorAll)
copy($$('a').map(a => a.href))   // copy every link on the page to your clipboard
monitorEvents(window, 'resize')  // log every resize event
getEventListeners($0)   // see which listeners are attached to the element
queryObjects(Promise)   // find every live Promise (handy for memory leaks)
$_                      // the result of the last expression

copy() alone saves a lot of time: copy a JSON response, a computed list or an object straight out of the page.

3. Watch values with Live Expressions

Instead of typing the same expression again and again, click the eye icon (Create live expression) at the top of the Console and enter, for example, document.activeElement. DevTools re-evaluates it continuously. This is the fastest way to debug focus traps, scroll positions or a global state variable while you interact with the page.

4. Edit production files with Local Overrides

Local Overrides let you change a live site's HTML, CSS, JavaScript, API responses and even response headers, and keep those changes across reloads. Steps from the official docs:

1. Open Network, right-click a request and choose Override content (or Override headers).
2. Pick a local folder for override files and click Allow in the browser prompt.
3. Edit the file in Sources (or the header in Headers > Response Headers), save with Ctrl+S / Cmd+S, then reload.

To mock an API, filter Network by Fetch/XHR, override the response JSON, save and refresh. Good uses: testing a CSS fix on production before deploying, or adding a Content-Security-Policy header to see what it would break. Turn it off under Sources > Overrides > Enable Local Overrides. Note that cache is disabled while overrides are on.

5. Throttle, block and copy network requests

In the Network panel:

• Throttling dropdown: choose Fast 4G, Slow 4G or 3G to see real loading behavior. Combine with Disable cache to simulate a first visit.
• Block requests: right-click a request and choose Block request URL or Block request domain; manage the rules in the Request conditions drawer panel (formerly Network request blocking), which can also throttle individual requests. Test what happens when a third-party script, font or API is down.
• Copy as fetch / cURL: right-click a request > Copy > Copy as fetch or Copy as cURL to replay it in the console or terminal with the same headers and cookies.
• Filter tricks: type status-code:404, larger-than:500k or -domain:example.com in the filter box.

6. Read Core Web Vitals live in the Performance panel

Open Performance and, before recording anything, you see the live metrics view: your local LCP and CLS update as the page loads, and INP appears once you interact (docs). Hover a value for its breakdown, and use the Interactions and Layout shifts lists to find the exact event behind a bad score.

Under Field data, click Set up to compare your local numbers with real-user data from the Chrome UX Report for that URL. If field data is bad but local is good, the cause is usually device or network: match the CPU and network throttling the panel suggests, then record a trace.

7. Emulate devices, sensors and dark mode

• Device Mode: press Ctrl+Shift+M / Cmd+Shift+M to toggle a phone or tablet viewport, with touch emulation and device pixel ratio.
• Sensors: Command Menu > show sensors to fake geolocation (pick a city or enter coordinates), device orientation and idle state.
• Rendering: Command Menu > show rendering to emulate prefers-color-scheme, prefers-reduced-motion, print media, and vision deficiencies such as blurred vision or color blindness.

Device Mode approximates a phone; it does not run mobile Safari or Android Chrome. For real-device bugs, use remote debugging.

8. Record and replay user flows with the Recorder

The Recorder panel (Command Menu > show recorder) records a sequence of clicks, typing and navigation, then replays it on demand (docs). Use it to:

• Reproduce a multi-step bug in one click instead of clicking through a checkout every time.
• Replay a flow slowly, or set a breakpoint on a step.
• Click Measure performance to replay the flow while recording a Performance trace.
• Export the flow as JSON or as a Puppeteer script, a good start for an automated test.

For full end-to-end test suites, a dedicated runner such as Playwright is still the better tool; browse more in the testing tools directory.

9. Find unused CSS and JavaScript with Coverage

Open Command Menu > show coverage, choose Per function or Per block, and click the reload button. The Coverage panel lists every file with the share of bytes actually executed: green is used, gray is unused. Click a file to see unused lines marked in Sources.

Coverage reflects only what ran during your session. Code for other routes, breakpoints or user actions shows as unused until you trigger it, so treat the numbers as a hint for code splitting, not a list of code to delete.

10. Ask AI assistance about styles, requests and performance

Chrome DevTools includes AI assistance powered by Gemini (docs). It is off by default: enable it under Settings > AI assistance. Then use the AI assistance entry in the panel you are in to:

• Ask why an element is not centered or why a style does not apply (Elements).
• Ask why a request failed, using its headers and timing (Network).
• Get an explanation of a script file (Sources).
• Ask what is slowing down a recorded trace and how to improve LCP (Performance).

Requirements as of October 2026: the latest Chrome, a signed-in Google account, age 18 or older, and a supported location. Treat answers as suggestions and verify them; the feature is labeled experimental, and data you share is sent to Google.

Bonus: small habits that add up

• Force element state: in Elements, click :hov in the Styles pane to force :hover, :focus or :active and style them without chasing the mouse.
• Search the DOM by selector: press Ctrl+F / Cmd+F in Elements and type a CSS selector or XPath, not just text.
• Preserve log: tick Preserve log in Console or Network so messages survive redirects and reloads.
• Dock where it fits: the three-dot menu > Dock side puts DevTools at the bottom for wide layouts or in a separate window on a second monitor.

Looking for Chrome tooling beyond DevTools? DevHunt's testing and monitoring directories list tools makers have launched, and Safari users can check our Safari Web Inspector guide.

FAQ

What is the shortcut to open Chrome DevTools?

F12 or Ctrl+Shift+I on Windows and Linux, Cmd+Option+I on Mac. Ctrl+Shift+J / Cmd+Option+J opens straight to the Console, and Ctrl+Shift+C / Cmd+Shift+C starts the element picker.

How do I take a full-page screenshot in Chrome without an extension?

Open DevTools, press Ctrl+Shift+P / Cmd+Shift+P, type screenshot and choose Capture full size screenshot. Chrome saves a PNG of the entire scrollable page.

Can I save changes I make in Chrome DevTools?

Edits in the Elements panel are lost on reload. To keep changes, use Local Overrides (changes persist in a local folder for that site) or connect your project folder as a Workspace in Sources so edits are written to your source files.

Does Chrome DevTools have AI features?

Yes. AI assistance, powered by Gemini, can explain styles, network requests, source files and performance traces. Enable it under Settings > AI assistance; it requires sign-in, being 18 or older, and a supported location.

How do I test a slow connection in Chrome?

In the Network panel, open the throttling dropdown (default No throttling) and choose Fast 4G, Slow 4G or 3G, or add a custom profile. The Performance panel also has separate CPU and network throttling settings.