Trae CN 配置 Chrome MCP步骤1：开启chrome远程调试先杀掉当前 Chrome 开启调试端口方式

步骤1：开启chrome远程调试

先杀掉当前 Chrome

taskkill /F /IM chrome.exe

开启调试端口

方式1: 无历史数据启动

start chrome --remote-debugging-port=9222 --user-data-dir="%temp%\chrome_debug"

方式2: 带历史数据启动

带浏览器数据的启动，就是账号得重新登录:

# 步骤 1：先复制你自己的 Chrome 配置（完整复制）

xcopy "%LOCALAPPDATA%\Google\Chrome\User Data" "%USERPROFILE%\ChromeDebugProfile" /E /H /C /R /K /Y
# 步骤 2：用复制出来的配置启动（不会被锁定，能开端口）

start chrome --remote-debugging-port=9222 --user-data-dir="%USERPROFILE%\ChromeDebugProfile"

测试：

C:\Users\oneslide>curl http://127.0.0.1:9222/json/version
{
   "Browser": "Chrome/146.0.7680.165",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36",
   "V8-Version": "14.6.202.26",
   "WebKit-Version": "537.36 (@4b989da09e15a7dc0de0785cb5ff232aadae3f0f)",
   "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/6ed8bd9c-cb67-4cc6-9e43-4e2670a36b8d"
}

步骤2：Trae里直接配置（复制粘贴即可）

打开 Trae → Settings → AI Management → MCP → Add Manually

粘贴下面这段完整JSON（直接复制，不用改任何内容）：

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

步骤3：保存并重启 Trae

✅ 保存配置 ✅ 完全关闭 Trae 再重新打开 ✅ 自动生效

步骤4：测试连接

在 Trae 里输入命令：

mcp:checkconnection

显示 connection successful 就成功了。

步骤5：验证

对话框输入比如“打开百度并截图保存”。

为什么这个方案能成功？

不需要编译C++（你之前的报错就是卡在这里）
不需要装Chrome插件
不需要配置路径
Node任何版本都能用（包括你现在的24版）
功能和方式1完全一样：控制Chrome、操作页面、读取内容、自动化

踩坑

1. npm error gyp ERR! find VS You need to install the latest version of Visual Studio

你这个报错不是权限问题，核心是：Node 24 版本太新 + mcp-chrome-bridge 需要编译 C++ 代码，但你没装 Visual Studio 编译环境直接卡死安装失败。不要使用npm install -g mcp-chrome-bridge。使用文中方式。

卸载 mcp-chrome-bridge

npm uninstall -g mcp-chrome-bridge

报错完整日志：

D:\software\nginx-1.28.0>npm install -g mcp-chrome-bridge
npm warn cleanup Failed to remove some directories [
npm warn cleanup   [
npm warn cleanup     '\\\\?\\C:\\Users\\oneslide\\AppData\\Roaming\\npm\\node_modules\\mcp-chrome-bridge',
npm warn cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\oneslide\AppData\Roaming\npm\node_modules\mcp-chrome-bridge\node_modules\chrome-devtools-frontend\front_end\third_party\web-vitals\package\dist'] {
npm warn cleanup       errno: -4048,
npm warn cleanup       code: 'EPERM',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: 'C:\\Users\\oneslide\\AppData\\Roaming\\npm\\node_modules\\mcp-chrome-bridge\\node_modules\\chrome-devtools-frontend\\front_end\\third_party\\web-vitals\\package\\dist'
npm warn cleanup     }
npm warn cleanup   ],
npm warn cleanup   [
npm warn cleanup     '\\\\?\\C:\\Users\\oneslide\\AppData\\Roaming\\npm\\node_modules\\mcp-chrome-bridge\\node_modules',
npm warn cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\oneslide\AppData\Roaming\npm\node_modules\mcp-chrome-bridge\node_modules\chrome-devtools-frontend'] {
npm warn cleanup       errno: -4048,
npm warn cleanup       code: 'EPERM',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: 'C:\\Users\\oneslide\\AppData\\Roaming\\npm\\node_modules\\mcp-chrome-bridge\\node_modules\\chrome-devtools-frontend'
npm warn cleanup     }
npm warn cleanup   ]
npm warn cleanup ]
npm error code 1
npm error path C:\Users\oneslide\AppData\Roaming\npm\node_modules\mcp-chrome-bridge\node_modules\better-sqlite3
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c prebuild-install || node-gyp rebuild --release
npm error (node:52020) [DEP0176] DeprecationWarning: fs.R_OK is deprecated, use fs.constants.R_OK instead
npm error (Use `node --trace-deprecation ...` to show where the warning was created)
npm error prebuild-install warn install No prebuilt binaries found (target=24.14.1 runtime=node arch=x64 libc= platform=win32)
npm error gyp info it worked if it ends with ok
npm error gyp info using node-gyp@12.2.0
npm error gyp info using node@24.14.1 | win32 | x64
npm error (node:55448) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.
npm error (Use `node --trace-deprecation ...` to show where the warning was created)
npm error gyp info find Python using Python version 3.9.4 found at "C:\Users\oneslide\AppData\Local\Programs\Python\Python39\python.exe"
npm error gyp ERR! find VS
npm error gyp ERR! find VS --msvs_version was not set on the command line
npm error gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details.
npm error gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm error gyp ERR! stack at VisualStudioFinder.fail (D:\software\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:118:11)
npm error gyp ERR! stack at VisualStudioFinder.findVisualStudio (D:\software\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:17)
npm error gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:104:5)

2. /json/version 404 Not Found

你可能使用了:

Chrome设置开启（Chrome ≥144）

打开Chrome，访问：chrome://inspect#remote-debugging
打开 Enable remote debugging 开关
重启Chrome

核心原因：

你开的是 Chrome 新版调试（WebSocket 仅限 DevTools）, 不是传统的 HTTP 调试端口！

Trae CN 配置 Chrome MCP