MCP工具链安装与配置总结

核心结论

多编辑器混用（Cursor / Trae / Costa）→ 全部工具一律全局安装，省心省力。

---

工具分类总览

类型	工具	安装方式	配置方式
MCP后台命令	chrome-devtools-mcp、ccswitch CLI	npm install -g 全局一次	每个编辑器单独配置
桌面总控	CC-Switch GUI	系统安装包（exe/dmg/AppImage）	一键同步到所有编辑器

---

一、chrome-devtools-mcp

安装方式对比

方式	命令	优点	缺点	推荐度
全局安装（推荐）	npm install -g chrome-devtools-mcp	所有编辑器共用；启动快；只存一份；版本统一	无	⭐⭐⭐⭐⭐
npx临时运行	npx -y chrome-devtools-mcp@latest	无需安装	每次重新下载；启动慢；多编辑器重复缓存；网络依赖	❌
项目本地安装	npm i -D chrome-devtools-mcp	—	切换项目/编辑器失效	❌

配置写法（所有编辑器通用）

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp"
    }
  }
}

---

二、ccswitch（命令行CLI版）

安装方式

npm install -g ccswitch

理由同 chrome-devtools-mcp 完全一致：

• 系统PATH永久存在 ccswitch 命令
• 所有编辑器共用同一个二进制程序
• 一次安装，终身使用

MCP配置写法

{
  "mcpServers": {
    "ccswitch": {
      "command": "ccswitch"
    }
  }
}

---

三、CC-Switch（桌面GUI版）

特点

• 独立桌面软件（exe / dmg / AppImage）
• 系统全局程序，装一次全软件通用
• 无需npm安装

核心功能

统一管理 + 一键同步——在CC-Switch里填好MCP配置，一键同步到Cursor、Trae、Costa，省去逐个编辑器复制JSON的麻烦。

---

四、最省事方案（多编辑器混用推荐）

Step 1：全局安装npm包（终端执行一次）

npm install -g chrome-devtools-mcp ccswitch

# 验证安装
chrome-devtools-mcp --version
ccswitch --version

Step 2：安装桌面版CC-Switch

去官网下载对应系统安装包，双击安装。

Step 3：在CC-Switch中配置

添加 chrome-devtools MCP → 一键同步给 Cursor、Trae、Costa。

---

记忆口诀

npm全局装一次，所有编辑器都能吃；
桌面CC做总控，一键同步不费事。

---

常见问题

问题	解决方案
找不到命令	检查npm全局bin目录是否在PATH中：npm root -g
权限不足	使用 sudo npm install -g 或配置npm全局目录
编辑器无法调用	确认MCP配置中的command字段为命令名（不是路径）
版本不统一	全局安装保证所有编辑器使用同一版本

---

一句话总结：chrome-devtools-mcp 和 ccswitch CLI 用 -g 全局装，CC-Switch GUI 直接装桌面版，然后在CC-Switch里一键同步给所有编辑器，完事。