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 overview describes Chrome DevTools as of October 2026: how to open them, what each panel is for, and the newer features (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
Console panel	Ctrl+Shift+J	Cmd+Option+J
Command Menu (inside DevTools)	Ctrl+Shift+P	Cmd+Shift+P

Without the keyboard: right-click any element and choose Inspect, or open Chrome's three-dot menu and choose More tools > Developer tools.

To open DevTools automatically for every new tab, start Chrome with a flag, for example on macOS: open -a "Google Chrome" --args --auto-open-devtools-for-tabs (docs).

Chrome developer tools disabled?

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.

Docking and the Command Menu

Use the three-dot menu inside DevTools to dock it right, bottom, left or in a separate window. The Command Menu is the fastest way around: type "screenshot", "dark", "disable JavaScript" or any panel name and press Enter.

The main Chrome DevTools panels

Panel	What it's for
Elements	Live DOM and CSS: edit styles, see the box model, debug flexbox and grid
Console	Logs, errors and a JavaScript REPL against the current page
Sources	Read source files, set breakpoints, step through code, edit with Workspaces or Local Overrides
Network	Every request with headers, timing, payload and response; throttling and blocking
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
Lighthouse	Automated audits for performance, accessibility, SEO and best practices
Recorder	Record a user flow, replay it, measure it, export it as Puppeteer code
Privacy and security	HTTPS status, certificates and mixed content

More panels live under More tools (three-dot menu): Rendering, Coverage, Changes, CSS overview, Animations, Sensors, Network conditions, Layers, Issues, Autofill, WebAuthn and others (DevTools docs).

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. Click the flex or grid badge next to an element to overlay its layout. The Computed tab shows which rule actually won.

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.

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.

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.
5. Right-click and choose Block request URL to see how the page behaves when a script or API fails.

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.

Application and Lighthouse

Application is where you clear or edit cookies and storage, unregister a stuck service worker, or check a web app manifest. 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.

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. 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).
• iPhone and iPad: Chrome on iOS uses WebKit, so you need Safari's Web Inspector on a Mac. See Chrome DevTools on iOS.

AI assistance in Chrome DevTools

DevTools includes AI assistance, powered by Gemini. 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.

Chrome DevTools for coding agents (MCP)

The official Chrome DevTools MCP server lets AI coding agents such as Claude Code, Cline 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"]
    }
  }
}

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.

Extending DevTools

Chrome extensions can add their own DevTools panels: React, Vue and Redux all ship one. See the best Chrome DevTools extensions. For lesser-known built-in features (Local Overrides, Coverage, Live Expressions), see 10 Chrome DevTools tips.

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.

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.