Chrome Developer Tools: What They Are and How to Use Them

Chrome Developer Tools (Chrome DevTools) are the web development and debugging tools built into Google Chrome. They let you inspect and edit a page's HTML and CSS, run JavaScript in a console, set breakpoints, watch every network request, profile performance and memory, and audit a page with Lighthouse. There is nothing to download or enable: press F12 (or Cmd+Option+I on Mac) in any Chrome window (Chrome for Developers).

This guide describes Chrome DevTools as of November 2026 (Chrome 157 started rolling out to stable on November 3, 2026, per Chromium Dash). It covers how to open the developer tools in Chrome on Windows, Mac and ChromeOS, what each panel is for, the keyboard shortcuts worth memorizing, the productivity features most people never find (Snippets, Local Overrides, Workspaces, the Recorder, CSS Overview, request throttling), and the newer AI features: Gemini-powered AI assistance and the DevTools MCP server for coding agents.

How to open Chrome DevTools

To open	Windows / Linux / ChromeOS	Mac
Last-used panel	F12 or Ctrl+Shift+I	Cmd+Option+I (or Fn+F12)
Elements panel, in inspect mode	Ctrl+Shift+C	Cmd+Option+C (or Cmd+Shift+C)
Console panel	Ctrl+Shift+J	Cmd+Option+J
Command Menu (inside DevTools)	Ctrl+Shift+P	Cmd+Shift+P

Google's own memory aid: C is for CSS (Elements), J is for JavaScript (Console), and I opens whatever you used last (docs).

Without the keyboard: right-click any element and choose Inspect, or open Chrome's three-dot menu and choose More tools > Developer tools. Right-click > Inspect is the quickest route when you care about one specific element, because DevTools opens with that node already selected in the DOM tree.

To open DevTools automatically for every new tab, quit Chrome completely and start it with the --auto-open-devtools-for-tabs flag (docs):

# macOS
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
# Windows
start chrome --auto-open-devtools-for-tabs
# Linux
google-chrome --auto-open-devtools-for-tabs

The flag only applies to the first Chrome process. On Windows, end any leftover Chrome processes in Task Manager if it seems to do nothing.

Chrome developer tools disabled?

If you're trying to work out how to enable developer tools in Chrome because nothing opens, the answer is usually that you can't do it yourself. If the shortcut does nothing and the menu item is greyed out, your Chrome is managed (a work, school or family-managed device) and an administrator has blocked DevTools with the DeveloperToolsAvailability policy. Open chrome://policy to confirm. Only the administrator can change it; there is no user setting that turns DevTools on.

The policy has three values (policy definition):

Value	Name	Effect
0 (default)	DeveloperToolsDisallowedForForceInstalledExtensions	DevTools work everywhere except extensions installed by policy
1	DeveloperToolsAllowed	DevTools work everywhere
2	DeveloperToolsDisallowed	No DevTools, no Inspect, no keyboard shortcuts, and (since Chrome 99) no View page source shortcut

Since Chrome 147, admins can also allow or block DevTools per URL with DeveloperToolsAvailabilityAllowlist and DeveloperToolsAvailabilityBlocklist. That is where the message "your organization has blocked the use of DevTools on this page" comes from: DevTools still work on other sites, just not on the URLs the blocklist matches. The same policies also cover Chrome DevTools Protocol access, so remote debugging and automation tools are blocked on those pages too.

Docking and the Command Menu

Use the three-dot menu inside DevTools to dock it right, bottom, left or in a separate window. Ctrl+Shift+D / Cmd+Shift+D toggles back to the last docking position. The Command Menu is the fastest way around: type "screenshot", "dark", "disable JavaScript" or any panel name and press Enter.

The Command Menu has prefixes that change what it searches (docs):

Type this	What happens
> (the default after Ctrl+Shift+P)	Run a command: "Capture full size screenshot", "Show Rendering", "Disable JavaScript"
Nothing (delete the >) or Ctrl+P / Cmd+P	Open any loaded file by name
: then a number	Jump to a line in the open file (:42, or :42:9 for line and column)
@ (or Ctrl+Shift+O / Cmd+Shift+O)	Jump to a function in a script or a rule in a stylesheet
! then a name	Run a saved snippet
?	List every available prefix

Chrome DevTools keyboard shortcuts for Windows and Mac

The full list is on Google's shortcuts page, and any DevTools tooltip shows the shortcut for that button. The Chrome developer tools Mac shortcuts use Cmd and Option where Windows and Linux use Ctrl and Shift. These are the ones that pay for themselves within a week:

Action	Windows / Linux	Mac
Open DevTools (last panel)	F12 or Ctrl+Shift+I	Cmd+Option+I
Inspect element mode	Ctrl+Shift+C	Cmd+Shift+C
Command Menu	Ctrl+Shift+P	Cmd+Shift+P
Open file	Ctrl+P or Ctrl+O	Cmd+P or Cmd+O
Search across all loaded sources	Ctrl+Shift+F	Cmd+Option+F
Search in the current panel	Ctrl+F	Cmd+F
Toggle Device Mode	Ctrl+Shift+M	Cmd+Shift+M
Show or hide the Drawer (Console under any panel)	Esc	Esc
Next / previous panel	Ctrl+] / Ctrl+[	Cmd+] / Cmd+[
Open Settings	F1 or ?	Fn+F1 or ?
Hard reload	Ctrl+Shift+R or Ctrl+F5	Cmd+Shift+R
Pause / resume script	F8 or Ctrl+\	F8 or Cmd+\
Step over / into / out	F10 / F11 / Shift+F11	F10 / F11 / Shift+F11
Toggle breakpoint on current line	Ctrl+B	Cmd+B
Save edited file (Sources)	Ctrl+S	Cmd+S
Run snippet in editor	Ctrl+Enter	Cmd+Enter
Clear the Console	Ctrl+L	Cmd+K or Option+L
Start / stop a recording (Network, Performance, Memory, Recorder)	Ctrl+E	Cmd+E
Generate code from a comment (AI)	Ctrl+I	Cmd+I
Hide the selected element (Elements)	H	H
Edit as HTML (Elements)	F2	Fn+F2

In the Styles pane, click a numeric value and use the arrow keys: Up/Down changes it by 1, Shift by 10, Alt/Option by 0.1, and Ctrl/Cmd by 100. Shift-click a color swatch to cycle between formats such as hex, RGB and oklch.

The main Chrome DevTools panels

Panel	What it's for
Elements	Live DOM and CSS: edit styles, see the box model, debug flexbox, grid and anchor positioning
Console	Logs, errors and a JavaScript REPL against the current page
Sources	Read source files, set breakpoints, step through code, Snippets, edit with Workspaces or Local Overrides
Network	Every request with headers, timing, payload and response; throttling, resending and overrides
Performance	Record loading and runtime performance; live Core Web Vitals; Insights
Memory	Heap snapshots and allocation timelines to find leaks
Application	Cookies, localStorage, IndexedDB, cache storage, service workers, manifest, ads diagnostics
Lighthouse	Automated audits for performance, accessibility, best practices and SEO
Recorder	Record a user flow, replay it, measure it, export it as Puppeteer code
Privacy and security	HTTPS status, certificates and mixed content
AI assistance	Chat with Gemini about the selected element, request, file or trace

More panels live under More tools (three-dot menu): Rendering, Coverage, Changes, CSS overview, Animations, Sensors, Network conditions, Request conditions, Layers, Issues, Autofill, WebAuthn and others (DevTools docs). Any of them can also be opened by name from the Command Menu, and you can drag a tab between the top panel area and the bottom Drawer.

Elements

Right-click a component on the page, choose Inspect, and edit any CSS value in the Styles pane; changes apply instantly and are lost on reload (unless you set up Overrides or a Workspace, below). Click the flex or grid badge next to an element to overlay its layout. The Computed tab shows which rule actually won.

Recent releases made the Styles pane much smarter. As of November 2026 it can keep showing rules that matched a moment ago as inactive styles, so a hover or @starting-style rule doesn't vanish while you inspect it, and a visual editor appears next to position-area declarations for CSS anchor positioning (New in DevTools, November 2026). Custom elements get their own badge in the DOM tree, and selecting a ::before or ::after pseudo-element binds it to $0 in the Console (Chrome 152 notes).

Small Elements habits that save time:

• Press H on a selected node to hide it (toggles visibility: hidden), handy for finding what is covering a button.
• Drag nodes in the DOM tree to test a different order without touching code.
• Use :hov in the Styles toolbar to force :hover, :focus or :active, and .cls to toggle classes.
• Right-click a node > Capture node screenshot to export just that element as a PNG.

Console

Errors and console.log output from the page appear here. You can also run code against the page: $0 is the element selected in Elements, $$('a') returns all links as an array, and copy(obj) puts any value on the clipboard.

The Console Utilities API has more helpers that only exist inside DevTools:

$_                          // result of the last expression
$x('//button[@disabled]')   // XPath query, returns an array
getEventListeners($0)       // every listener attached to the selected element
monitorEvents(window, 'resize')  // log events as they fire; unmonitorEvents() stops it
queryObjects(Promise)       // every live object created by a constructor
table(data)                 // same as console.table()

Since Chrome 152 you can right-click a console.table() result and copy it as Markdown or CSV, which is a fast way to move data from a page into an issue or a spreadsheet (Chrome 152 notes). Press Esc in any other panel to open the Console in the Drawer, so you can run code while looking at Network or Elements.

Sources

Open a file with Ctrl+P / Cmd+P, click a line number to set a breakpoint, then trigger the code. Execution stops so you can inspect variables and step with F10 and F11. Our Chrome debugging guide covers breakpoint types, logpoints and Node.js debugging in detail.

The Sources panel is also home to three productivity features covered further down: Snippets (saved scripts), Overrides (local copies of remote files) and Workspace (your real project folder).

Network

Reload with DevTools open to capture requests. The tools you'll use most:

1. Filter by type (Fetch/XHR, JS, Img) or type a URL fragment in the filter box.
2. Click a request to see Headers, Payload, Preview, Response and Timing.
3. Check Disable cache to test like a first-time visitor, and pick a throttling profile such as Slow 4G.
4. Right-click a request and choose Copy > Copy as cURL or Copy as fetch to replay it outside the browser. Our cURL converter turns that command into fetch, Python or other code.
5. Right-click a request and choose Resend to fire it again. Since Chrome 152 this works for any fetchable request, not only XHR (it used to be called Replay XHR), and Edit and resend as fetch drops a ready-to-edit fetch() call into the Console (Chrome 152, October 2026 notes).
6. Open More tools > Request conditions and add a URL pattern to block a script or API and see how the page behaves when it fails.

Press Ctrl+F / Cmd+F inside Network to search across all headers, payloads and response bodies at once, which answers "which request returned this value?" in seconds. JSON responses in Preview are collapsible; for a long payload, copy it into our JSON formatter.

Performance

Open the panel and you immediately see live LCP, CLS and INP for the current page, compared with field data from real Chrome users when available. This replaced the retired Web Vitals extension (Chrome blog). Click record, use the page, stop, and the Insights sidebar points to the main problems, such as a slow LCP element or long tasks.

To compare your machine with real users, click Set up under Field data and DevTools fetches Chrome UX Report data for the URL. You can map http://localhost:8080 to your production origin so local pages show production field data (Performance panel docs). Single-page apps got a big upgrade in 2026: Live Metrics report Core Web Vitals for soft navigations (client-side route changes) since Chrome 152, and Insights handle them since Chrome 153-154.

Application and Lighthouse

Application is where you clear or edit cookies and storage, unregister a stuck service worker, or check a web app manifest. Since Chrome 155-156 you can delete selected cookie rows with the keyboard, and an Ads section shows how much CPU and network ad scripts use (November 2026 notes). Lighthouse runs an audit of the current page and produces a scored report with specific fixes. For CI, the same audits run from the lighthouse npm package.

The Lighthouse panel has three modes (docs):

• Navigation (default): reloads the page and audits the load.
• Timespan: audits whatever you do during a recording, such as opening a menu or submitting a form.
• Snapshot: audits the page in its current state without reloading, useful for a modal or a logged-in screen.

Uncheck categories you don't need (Performance, Accessibility, Best Practices, SEO) to make runs faster. Since Chrome 143 the panel runs Lighthouse 13, which finished merging Lighthouse's performance audits with the Performance panel's Insights (Chrome 143 notes). For performance work, Google now steers people to the Performance panel; Lighthouse stays most useful for accessibility, best practices and SEO checks.

Device mode: test mobile layouts

Click the device icon at the top left of DevTools, or press Ctrl+Shift+M / Cmd+Shift+M. Choose a device preset or drag to any width, set the device pixel ratio, and throttle CPU and network. As of October 2026 the presets are grouped into Mobile, Foldables, Tablets & Desktops and Smart Displays, with current hardware such as the iPhone 16, Pixel 10 and Galaxy Z Fold 6 (October 2026 notes).

Device mode simulates the viewport and touch; it is not the real mobile browser. For that, debug the phone itself:

• Android: enable USB debugging in Developer options, connect the phone, open chrome://inspect#devices on your computer and click Inspect under the tab (docs). The same chrome://inspect page lists Node.js processes started with --inspect (Node.js docs).
• iPhone and iPad: Chrome on iOS uses WebKit, so you need Safari's Web Inspector on a Mac. See Chrome DevTools on iOS.

The Sensors panel (More tools) overrides geolocation, device orientation and, since Chrome 155-156, the CPU performance tier that navigator.cpuPerformance reports. The Rendering panel emulates CSS media features such as prefers-color-scheme: dark, prefers-reduced-motion, forced-colors and print media (docs).

Productivity features most developers never open

Most Chrome dev tools tutorials stop at Elements, Console and Network. The rest of the web developer tools Chrome includes remove whole categories of busywork. Each takes a couple of minutes to set up. (For a shorter list of tricks, see our 10 Chrome DevTools tips.)

Snippets: save the scripts you keep pasting

If you paste the same code into the Console every day (log all images without alt text, clear a specific localStorage key, fill a test form), save it as a snippet. Snippets run in the page's context, on any page, including Incognito (docs).

1. Open Sources > Snippets (it may be behind the >> overflow), or run "Create new snippet" from the Command Menu.
2. Name it and write the code. Save with Ctrl+S / Cmd+S.
3. Run it with Ctrl+Enter / Cmd+Enter, or from anywhere: Ctrl+P / Cmd+P, type ! and the snippet name, press Enter.

A snippet worth keeping, which lists images missing alt text:

const missing = [...document.images].filter(img => !img.hasAttribute('alt'));
console.table(missing.map(img => ({ src: img.currentSrc, width: img.width })));
missing.forEach(img => (img.style.outline = '3px solid red'));

Local Overrides: keep edits to a live site across reloads

Normally every change you make in DevTools disappears on reload. Local Overrides save a copy of the modified file (or response headers) to a folder on your disk, and DevTools serves that copy instead of the network version (docs). Use it to:

• Test a CSS or JavaScript fix on production before deploying it.
• Mock an API response: right-click a Fetch/XHR request in Network > Override content, edit the JSON, save, reload.
• Prototype a header fix such as a CORS or Content-Security-Policy change with Override headers, without access to the server.

The first time, DevTools asks you to pick a folder and click Allow. Overridden files show a purple dot in Network and are listed under Sources > Overrides. Since Chrome 155-156, response body overrides also persist across page navigations (November 2026 notes).

Limits: cache is disabled while overrides are on, DOM edits in Elements are not saved, CSS that lives inside an HTML file must be edited in Sources, and source-mapped files can't be overridden.

Workspaces: save DevTools edits to your real source files

Overrides patch remote files; a Workspace maps the page to your local project so that a CSS change in DevTools is written back to your actual source file. Since Chrome 137 your dev server can also connect the folder automatically (Google still labels automatic workspaces experimental) (Workspaces docs). Serve this file from /.well-known/appspecific/com.chrome.devtools.json with a random v4 UUID:

{
  "workspace": {
    "uuid": "8f1d2c3a-6b7e-4f90-a1b2-c3d4e5f60718",
    "root": "/Users/you/code/my-app"
  }
}

Open your local page, go to Sources > Workspace, click Connect, and edits you save in DevTools land in the project. If your dev server hot-reloads, you see the change immediately. With a connected Workspace, AI assistance can also save the CSS changes it suggests straight to your sources. Generate the UUID with our UUID generator if you don't have one at hand.

Recorder: record, replay and export user flows

The Recorder panel (More tools > Recorder) records clicks, typing and navigation, then replays them on demand (docs). It is the fastest way to reproduce a bug that takes eight clicks to reach.

1. Click Start new recording, name it, and click through the flow.
2. Click End recording. Edit steps, change selectors or add assertions if needed.
3. Replay it, optionally with network throttling, or Measure performance to get a Performance trace of the whole flow.
4. Export it as a JSON file, an @puppeteer/replay script, a Puppeteer script, a Puppeteer for Firefox script, or Puppeteer with a Lighthouse analysis (Recorder reference).

Attach the JSON export to a bug report and anyone can import it and replay the exact steps. The Recorder does not capture hover events automatically, so add hover steps by hand. It is available in Chrome, not in plain Chromium builds.

CSS Overview: audit a whole stylesheet at once

More tools > CSS overview > Capture overview produces a report of every color, font, unused declaration and media query on the page (docs). Click any color or font size to see the elements that use it, and the page highlights them. It is the quickest way to find the five slightly different greys a design system is supposed to have one of, text with low contrast, and declarations that have no effect (for example width on an inline element).

Network throttling and request conditions

The Network panel's throttling menu has Fast 4G, Slow 4G, 3G and Offline presets. When field data is turned on in the Performance panel, DevTools marks one preset as recommended based on Chrome UX Report data for your site (Network reference). For anything more specific, add a profile in Settings > Throttling with download and upload speed, latency, and even packet loss and queue length for WebRTC testing (docs). WebSocket connections are throttled too.

Throttling the whole page is often the wrong test. In Chrome 144 the old Network request blocking panel was renamed Request conditions, and since Chrome 145 it can throttle individual requests by URL pattern (Chrome 145 notes). Slow down just your analytics script or one API endpoint and see whether the page still renders, without waiting on every other request.

Goal	Where	How
Whole page on a slow phone network	Network > throttling menu	Pick Slow 4G or a custom profile
Slow CPU like a budget phone	Performance > CPU	Calibrate presets in Settings > Throttling first
One slow API or third-party script	More tools > Request conditions	Add a URL pattern, choose a throttling profile
Script or API failing completely	More tools > Request conditions	Add a URL pattern and block it
Offline behavior of a PWA	Network > throttling menu	Pick Offline
Test a fix to an API response	Network > right-click > Override content	Edit and save, then reload

Coverage and Changes

More tools > Coverage, then reload, shows how much of each CSS and JavaScript file actually ran, so you get a list of unused code to split out or delete (docs). More tools > Changes lists every edit you made to CSS and files in this session as a diff, so you can copy the final CSS into your codebase instead of retyping it from memory.

AI assistance in Chrome DevTools

DevTools includes AI assistance, powered by Gemini, the newest addition to the Chrome web dev tools. It can explain why an element is styled the way it is and fix it, diagnose a failed network request, explain a source file, and analyze a performance recording. Requirements: the latest Chrome, signed in to a Google account, age 18+, and a supported region. It is off by default; enable it in DevTools Settings > AI assistance (docs). Google labels it experimental, so check what it suggests.

What it does well as of November 2026:

• Styling: select an element, open AI assistance and ask "Why is this not centered?" or "Make all teaser images 16:9". It proposes CSS, applies it to the page on request, and with a Workspace connected can save it to your files.
• Network: select a failed request and ask "Why does this request fail?" or "Are there any security headers?". It reads the headers and timing for you. Google's own prompt ideas include "Write a detailed bug report for this network error", which produces text you can paste into an issue tracker.
• Performance: ask about an insight or a slow LCP and it reads the trace. Since Chrome 147 you can ask open questions without selecting anything first ("What performance issues exist on this page?"), and DevTools records a trace itself to answer (Chrome 147 notes).
• Console errors: click Understand this error next to a Console message for an explanation (available since Chrome 125).
• Code generation: in the Console or Sources, type a comment such as // check all img elements for valid alt attributes and press Ctrl+I / Cmd+I (lowercase i) to generate the code (since Chrome 147).

Chats are saved in history and can be exported. Organizations can use an enterprise policy to control whether data sent to Gemini is logged and used for training, so check with your admin before using it on internal apps.

Chrome DevTools for coding agents (MCP)

The official Chrome DevTools MCP server, which Google now calls Chrome DevTools for agents, lets AI coding agents such as Claude Code, Cline, Cursor or Copilot drive a real Chrome: open pages, read console messages and network requests, take screenshots and record performance traces. Add it to your agent's MCP config:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

In Claude Code the one-liner is claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest (client configurations). Requirements are a Node.js LTS release and current stable Chrome or newer. To test it, ask your agent "Check the performance of https://developers.chrome.com"; it should open Chrome and record a trace. The browser starts only when a tool first needs it.

This is useful when an agent needs to check that its change actually renders and has no console errors. If you build with AI agents, our vibe coding guide has more on that workflow.

Memory (heap snapshots) 14

Input automation 10

Debugging 10

Navigation 6

Extensions 5

Progressive Web Apps 4

Performance 3

Emulation 2

Network 2

Third-party 2

WebMCP 2

WebAuthn 1

61 tools in total as of November 2026 (v1.12.0). The --slim flag exposes a reduced set. Source: chrome-devtools-mcp tool reference

The Debugging group includes evaluate_script, list_console_messages, take_screenshot, take_snapshot, lighthouse_audit and, since October 2026, get_css_styles for computed and matched CSS (November 2026 notes). The package also ships a chrome-devtools CLI for scripting the same actions from a terminal, and agent skills you can install as a Claude Code plugin with /plugin marketplace add ChromeDevTools/chrome-devtools-mcp.

Useful flags (configuration guide): --headless, --isolated (a temporary profile), --slim (fewer tools, smaller context), --no-usage-statistics (Google collects tool usage statistics by default) and --no-performance-crux (stops sending trace URLs to the CrUX API for field data).

A timeline of notable DevTools releases

Google publishes DevTools changes in What's new in DevTools. Since September 2026, when Chrome moved to two stable releases a month, the notes are a monthly recap. Dates below are the Chrome stable release dates from Chromium Dash.

1. Nov 2020 (Chrome 87)CSS Grid debugging tools: grid badges and overlays in Elements (notes).
2. Nov 2021 (Chrome 96)CSS Overview panel ships as a preview feature (docs).
3. Jan 2022 (Chrome 97)Recorder panel preview: record, replay and measure user flows (notes).
4. May 2024 (Chrome 125)First Gemini feature: Understand this error explains Console errors and warnings (notes).
5. Sep 2024 (Chrome 129)Live Core Web Vitals in the Performance panel, with Chrome UX Report field data (notes).
6. Nov 2024 (Chrome 131)AI assistance for CSS, and the Insights tab in the Performance panel (notes).
7. Jan 2025 (Chrome 132)AI assistance extends to network requests, source files and performance traces; the separate Performance insights panel is removed (notes).
8. May 2025 (Chrome 137)Automatic Workspace folders via com.chrome.devtools.json; Gemini can save CSS changes to your files (notes).
9. Sep 2025 (Chrome 141)Preview of the Chrome DevTools MCP server for AI coding agents (notes).
10. Oct 2025 (Chrome 142)Gemini code suggestions in the Console and Sources (notes).
11. Dec 2025 (Chrome 143)Lighthouse 13 in the Lighthouse panel (notes).
12. Jan-Feb 2026 (Chrome 144-145)Network request blocking becomes Request conditions; per-request throttling on by default in 145 (notes).
13. Apr 2026 (Chrome 147)Full code generation with Ctrl+I / Cmd+I, and AI assistance answers open questions without a selected context (notes).
14. Aug 2026 (Chrome 152)Resend for any request (was Replay XHR), binary payload viewer, soft-navigation Core Web Vitals, console tables copied as Markdown or CSV (notes).
15. Sep 2026 (Chrome 153-154)Chrome moves to two stable releases a month. Ads section in Application, inactive styles in Elements, modern Device Mode presets (notes).
16. Oct 2026 (Chrome 155-156)Visual position-area editor, persistent local overrides across navigations, get_css_styles for agents (notes).
17. Nov 3, 2026 (Chrome 157)Chrome 157 begins its stable rollout (version history).

To try features before they reach stable, install Chrome Canary or Chrome Dev next to your normal Chrome. DevTools also has a What's new panel (added in Chrome 133) that highlights recent changes.

Browser developer tools: Chrome vs Edge, Firefox and Safari

Every major desktop browser ships its own developer tools, and the core panels are similar. The Chrome web developer tools matter most because Chrome is what most of your visitors use: StatCounter puts it at 66.98% of desktop browsing worldwide in October 2026.

Chrome 66.98%

Edge 13.24%

Safari 7.83%

Firefox 5.72%

Opera 2.65%

Brave 1.01%

Source: StatCounter Global Stats

	Chrome	Edge	Firefox	Safari (Mac)
Open dev tools (Chrome, Edge, Firefox on Windows)	F12 or Ctrl+Shift+I	F12 or Ctrl+Shift+I	F12 or Ctrl+Shift+I	n/a
Open on Mac	Cmd+Option+I	Cmd+Option+I	Cmd+Opt+I	Enable first (see below)
Must be enabled first?	No	No	No	Yes: Settings > Advanced > Show features for web developers
Command Menu	Ctrl+Shift+P	Ctrl+Shift+P
Main panels	Elements, Console, Sources, Network, Performance, Memory, Application	Same names (Elements, Console, Sources, Network...)	Inspector, Console, Debugger, Network Monitor, Performance	Web Inspector
Debug real mobile devices	Android via chrome://inspect			iPhone and iPad

Sources: Chrome, Edge, Firefox, Safari.

Edge's DevTools use the same shortcuts, panel names and Command Menu as Chrome's, laid out in Microsoft's Activity Bar and Quick View. Firefox's tools are a useful second opinion for CSS layout and the only option for Firefox-only bugs. Safari's Web Inspector is how you debug real iPhones and iPads, including Chrome on iOS, which runs on WebKit. Chrome is the only one of the four with Gemini built into its DevTools and an official MCP server for coding agents.

Web Developer toolbar: Chrome extension vs built-in DevTools

Many people looking for a web developer toolbar in Chrome mean the Web Developer extension by Chris Pederick. It adds a toolbar button with menus of one-click web developer tools, and it is the official Chrome port of the long-running Firefox extension of the same name. On the Chrome Web Store it lists 1,000,000+ users, version 3.0.1, last updated June 29, 2024.

Most of what such a toolbar does is also in the built-in web developer tools in Chrome, just a few more keystrokes away: Disable JavaScript, Show Rendering or Capture full size screenshot from the Command Menu, image details in Elements, outlines with a quick CSS rule. A toolbar's strength is speed for people who don't live in DevTools (QA, SEO, content teams). If you only need a couple of its features, a snippet like the alt-text one above does the same job with no extension installed.

Other Google web developer tools that pair with DevTools

DevTools are the web developer tools Google ships inside Chrome, but a few other free Google web developer tools fill gaps DevTools can't:

• PageSpeed Insights: gives both lab data (Lighthouse) and field data (real Chrome users) for any public URL (about PSI). Use it for pages you don't control or to share a result with a link.
• Chrome UX Report (CrUX): the real-user dataset behind the Performance panel's field data and PageSpeed Insights.
• Lighthouse CLI: npx lighthouse https://example.com --view runs the same audits as the panel and opens the HTML report (Lighthouse README); run it in CI to catch regressions before release.
• Puppeteer: Google's Node library for automating Chrome, which the Recorder exports to and the MCP server uses under the hood.

Extending DevTools

Chrome extensions can add their own DevTools panels: React, Vue and Redux all ship one. See the best Chrome DevTools extensions, or the dedicated guides to React DevTools and Vue DevTools. For lesser-known built-in features (Local Overrides, Coverage, Live Expressions), see 10 Chrome DevTools tips. Browse more browser extensions for developers on DevHunt.

You can also extend DevTools without writing an extension: the Performance panel's extensibility API lets your own code add custom tracks to a trace, and since Chrome 153-154 Ctrl+F in the flame chart searches those tracks too (October 2026 notes).

Troubleshooting common DevTools problems

Symptom	Likely cause	Fix
F12 does nothing, menu item greyed out	Managed device policy	Check chrome://policy for DeveloperToolsAvailability; ask your admin
"Your organization has blocked the use of DevTools on this page"	Per-URL DeveloperToolsAvailabilityBlocklist (Chrome 147+)	Only the admin can change it; other sites still work
F12 opens something else on a laptop	F-keys mapped to media keys	Use Fn+F12, or Ctrl+Shift+I / Cmd+Option+I
Styles edits vanish on reload	That's the default	Set up Local Overrides or a Workspace
Network panel is empty	DevTools opened after the page loaded	Keep DevTools open and reload (Ctrl+R / Cmd+R)
Can't see a hover or focus style	Element loses state when you move the mouse	Use :hov in Styles, or the new inactive styles setting
Breakpoint never hits	File is ignore-listed, or source maps are missing	See our debugging guide
AI assistance missing	Not signed in, under 18, unsupported region or not enabled	Settings > AI assistance; check the requirements
DevTools text too small or huge	DevTools has its own zoom	Click inside DevTools, then Ctrl/Cmd + or -, Ctrl/Cmd+0 to reset

FAQ

What are Chrome developer tools used for?

Inspecting and editing HTML and CSS, debugging JavaScript, analyzing network requests, measuring page speed and Core Web Vitals, finding memory leaks, inspecting storage and cookies, and auditing accessibility and SEO.

Do I need to download or install Chrome DevTools?

No. They are part of every desktop Chrome install. If you want the newest DevTools features early, install Chrome Canary or Chrome Dev alongside stable Chrome.

How do I enable developer tools in Chrome?

They are always on: press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac). If nothing happens on a managed device, an administrator has disabled them via policy.

How to open developer tools in Chrome on Mac?

Press Cmd+Option+I, or Cmd+Option+J for the Console and Cmd+Option+C to inspect an element. From the menu bar: View > Developer > Developer Tools. Right-click > Inspect works too.

Is there a Chrome developer tools extension or plugin?

DevTools itself isn't an extension, but many extensions add panels to it, such as React Developer Tools and Redux DevTools. You install those from the Chrome Web Store.

Can I use Chrome DevTools on a phone?

Not directly on the phone. Debug Chrome for Android from a desktop via chrome://inspect and USB debugging; debug Chrome on iOS with Safari's Web Inspector on a Mac.

What is chrome://inspect?

A Chrome page that lists debuggable targets: tabs on an Android phone connected over USB, Node.js processes started with --inspect, and other remote targets. Click Inspect under a target to open a DevTools window for it.

What does devtools.chrome.enabled do?

It is a Firefox preference, not a Chrome one. Setting it to true in Firefox's about:config enables the Browser Console command line and the toolboxes for debugging Firefox's own interface. Chrome has no equivalent switch because its DevTools are always enabled.

Are developer tools Chrome-only?

No. Edge, Firefox and Safari all have built-in developer tools, opened with F12 or Ctrl+Shift+I on Windows (Safari on Mac needs Show features for web developers turned on first). Chrome's DevTools are the most widely used and the only ones with an official MCP server for coding agents.

Is AI assistance in Chrome DevTools free?

Google lists no price for it: it is built into Chrome. You need the latest Chrome, a Google account signed in, to be 18 or older, and a supported region, and you must turn it on in Settings > AI assistance.

How do I save changes I make in Chrome DevTools?

Use Local Overrides to keep edits to any website across reloads, or a Workspace to write edits back to your local project files. The Changes tab shows a diff of everything you edited in the session.

How do I resend or replay a network request in Chrome DevTools?

Right-click it in the Network panel and choose Resend (it was called Replay XHR before Chrome 152 and now works for fetch requests too). To change it first, choose Edit and resend as fetch, or Copy > Copy as cURL to run it from a terminal.