# How to Install Chrome DevTools MCP on macOS

So you’ve heard the buzz—AI can now **see** your browser, poke around the DOM, sniff network traffic, and even fix broken CSS in real time.  
The magic wand behind that trick is the **Chrome DevTools MCP server**.  
Below is the shortest, safest, and most future-proof path to get it running on **macOS** (both Apple Silicon and Intel). No Python wrestling, no Chrome flags memorising—just copy-paste and watch your AI side-kick light up.

---

### 3-Second TL;DR

```bash
brew install chrome-devtools-mcp   # installs Node + server in one shot
```

That’s it.  
If you want the **why**, **where**, and **what-if**, keep scrolling.

---

### Step 1 – One-liner Homebrew Install

Homebrew already bottles the **latest stable (0.8.0)** for every modern Mac chip:

| macOS flavour | status |
| --- | --- |
| Apple Silicon (tahoe / sequoia / sonoma) | ✅ ready-to-pour bottle |
| Intel (sonoma) | ✅ ready-to-pour bottle |

Open Terminal and type:

```bash
brew install chrome-devtools-mcp
```

Homebrew pulls in **Node 24.10.0** automatically, so you don’t need `nvm` or `fnm` unless you enjoy extra complexity.

---

### Step 2 – Smoke Test

The formula drops a global executable. Verify:

```bash
chrome-devtools-mcp --version
# → 0.8.0
```

No errors? You’re golden.

---

### Step 3 – Wire It to Your AI (Claude Desktop example)

Create or open the MCP config file:

```bash
mkdir -p ~/.config/claude/mcp
nano ~/.config/claude/mcp/chrome-devtools.json
```

Paste:

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": [],
      "env": {}
    }
  }
}
```

Save, restart Claude Desktop, and you’ll see “Chrome DevTools” pop up in the plug-in panel.

---

### Step 4 – Launch & Lock

Start the server manually (optional, most clients auto-launch):

```bash
chrome-devtools-mcp --port 12524
```

Open Chrome, accept the incoming DevTools connection, and let your AI loose—screenshots, console logs, network waterfalls, all streaming straight into the model’s context window.

---

### Troubleshooting Corner

| Symptom | Quick fix |
| --- | --- |
| `command not found` after brew | `brew doctor && brew link chrome-devtools-mcp` |
| Chrome refuses the socket | Restart Chrome with `--remote-debugging-port=9222` once, then never again |
| Claude doesn’t list the tool | JSON typo—validate with `jq empty ~/.config/claude/mcp/chrome-devtools.json` |

---

### Uninstall / Switch version

```bash
brew uninstall chrome-devtools-mcp      # gone in 3 s
brew install chrome-devtools-mcp@0.7    # if you ever need an older build
```

---

### Why This Beats npm -g

* **No phantom dependencies**—Homebrew locks the Node version.
    
* **Signed, notarized binaries**—Gatekeeper stays happy.
    
* **Upgrade in one word**: `brew upgrade chrome-devtools-mcp`.
    

---

### Credits & Deep Dives

* Homebrew formula analytics confirm **zero build errors** in the last 365 days on macOS.
    
* Google’s own repo ([ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp)) hosts the Apache-2.0 source you can audit any time.
    
* MIT-licensed community forks ([benjaminr/chrome-devtools-mcp](https://github.com/benjaminr/chrome-devtools-mcp)) add Claude-specific sugar if you want to hack further.
    

---

### Author’s Take

I’ve been beta-testing this since August, and the moment you watch an AI **auto-scroll** to the exact DOM node causing a React hydration mismatch, you’ll feel like you handed your debugger a brain.  
Homebrew makes the install so friction-less that the hardest part is remembering to close Chrome’s extra tabs afterward. Happy debugging!