场景#

在 Windows上用 VS Code 和 Chrome，在 WSL里用 Codex / Claude，通过 chrome-devtools-mcp 去驱动宿主机浏览器。

执行步骤#

1. Windows 侧（管理员 PowerShell）#

1.1 启动专用 Chrome（DevTools 端口 9228）#

1
taskkill /IM chrome.exe /F
2

3
& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
4
--user-data-dir="$env:USERPROFILE\ChromeProfiles\mcp" `
5
--remote-debugging-port=9228 `
6
--remote-debugging-address=127.0.0.1 `
7
--no-first-run `
8
--no-default-browser-check

1.2 配置端口转发：0.0.0.0:9229 → 127.0.0.1:9228#

1
netsh interface portproxy add v4tov4 `
2
listenaddress=0.0.0.0 listenport=9229 `
3
connectaddress=127.0.0.1 connectport=9228

1.3 配置防火墙放行 9229（只需要执行一次）#

1
New-NetFirewallRule `
2
-DisplayName "Chrome DevTools MCP 9229" `
3
-Direction Inbound `
4
-Protocol TCP `
5
-LocalPort 9229 `
6
-Action Allow

1.4 Windows本机验证 DevTools 是否正常#

1
curl.exe -v "http://127.0.0.1:9228/json"

正常应该返回 HTTP 200 + JSON。

2. WSL 侧#

2.1 获取宿主机 IP#

1
HOST_IP=$(ip route | awk '/default/ {print $3}')
2
echo "$HOST_IP"

2.2 验证跨系统访问#

1
curl -v "http://$HOST_IP:9229/json"

如果输出和 Windows 本机访问 9228 的 JSON 一样，就说明：

WSL2 → Windows 的链路 OK；
portproxy OK；
防火墙规则 OK。

2.3 MCP / chrome-devtools-mcp 配置要点#

host：上面拿到的 HOST_IP（例如 172.21.144.1）；
port：9229。

在codex里

1
[mcp_servers.chrome-devtools]
2
command = "npx"
3
args = ["chrome-devtools-mcp@latest", "--browserUrl=http://172.21.144.1:9229"]
4
startup_timeout_sec = 60.0

只要这两项对了，WSL2 中运行的 MCP（Codex / Claude）就能通过 HOST_IP:9229 跟 Windows 上的 Chrome 建立 DevTools 连接。

小结#

这次踩坑的关键点有三个：

WSL2 有独立网络栈，Windows Chrome 的 loopback 默认对它不可见；
不要对同一个端口做“自转发”的 portproxy（0.0.0.0:9222 → 127.0.0.1:9222），容易把行为搞坏；
选一个干净端口（9228 + 9229），用 portproxy + 防火墙打通，再把 MCP 统一指向这个端口，既清晰又稳定。

如果你在 WSL2 里也需要驱动宿主机浏览器做 DevTools 调试，可以直接参考这套步骤