使用Trae添加chrome-devtools mcp

前言

最近想体验一下浏览器自动化，在chrome-devtools-mcp与mcp-chrome与两者之间，选择了前者。

上面是两者的对比

一、手动添加mcp

1.trae右侧栏上方，点击设置图标

2.选择mcp，点击【添加】-【手动添加】
3.访问chrome-devtools-mcp github地址
github地址
找到getting started

复制json，粘贴到trae中

二、报错解决

1.问题

按照常规方法添加chrome-devtools-mcp，一直报错，本机执行

npx chrome-devtools-mcp@latest 

也存在问题，错误显示

npm error code ECOMPROMISED
npm error Lock compromised

在检查了node，npm版本都符合要求后，决定分开执行

2.分开执行

先安装该node项目

npm install --no-lockfile chrome-devtools-mcp@latest 

在trae中配置index.js

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "node",
      "args": [
        "D:\\chrome-devtools-mcp\\build\\src\\index.js"
      ]
    }
  }
}

三、使用

在trae中创建智能体，工具选择chrome-devtools

然后在ai对话框中选中该智能体，进行测试命令

总结

npx是安装并执行node项目，可能是自己本地环境存在问题，无法执行npx命令，最终是先安装，再配置执行文件index.js位置来使用，发现这种方法也还行，能自定义mcp安装包位置，方便统一管理