今天刚要打开 Claude Code 写代码的时候，发现本地的两个浏览器自动化 MCP（PlayWright、Chrome Devtools）失效了。

我的配置文件信息长这样

这谁受的了，明明和之前装的一模一样，我也没有动，怎么就会失效呢？

不知道你有没有遇到过这种场景。

真的很气人，这两款都是自动操作浏览器的，也是作为我们 Claude Code 的眼睛，没有它们开发效率会大幅度下降，相当于 Claude Code 看不见了，那开发出的页面效果能好吗？

针对于这两个问题，我今天专门写这篇文章来解决这两个问题，从此让你写代码爽到起飞！

首先这里我说明一下我当前的电脑环境信息，我当前的电脑是 Windows，Mac 版本不一定有效。

基本上都使用的最新的，你可以对照你电脑配置看一下，node.js 版本一定要大于 18 才行。

一、PlayWright MCP 解决方案

先来和你说一下，为什么之前安装的过几天后会发生这个问题

Claude Code 想要启动 Playwright MCP 服务，需要使用 npx 命令来启动，可以看到下面配置文件的 command key 代表的启动方式是什么，后面的 args 对应的就是启动参数

但是呢，在我们 Windows 电脑上，npx 命令是批处理文件（.cmd），所以 Claude Code 并不知道怎么正确的执行批处理文件。

结果可想而知了，肯定就是连接不上了。。。

3 分钟教你解决

步骤 1：安装必要的组件

在你运行的窗口输入下面指令进行组件安装

# 安装playwright相关包
npm install -g @playwright/test
npm install -g @executeautomation/playwright-mcp-server

步骤 2：移除之前的配置

如果之前你在 Claude Code 中安装过playwirght 则需要你先将安装的先移除掉

可以使用下面命令进行移除

claude mcp remove playwright

步骤 3：使用正确的方式进行安装

可以使用命令的形式安装

claude mcp add playwright -s user cmd -- /c npx @executeautomation/playwright-mcp-server

也可以将我下面的配置信息直接复制粘贴到你的配置文件中

 "playwright": {
      "type": "stdio",
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "@executeautomation/playwright-mcp-server"
      ]
    }

使用 claude mcp list 命令查看是否连接正常

可以看到已经成功连接，下面我们测试来打开让它打开浏览器看是否正常

步骤 4：测试连接，自动启动浏览器

你也可以在进入到 Claude Code 之后使用 /mcp 来查看连接是否正常

可以看到已经成功打开，到此问题解决！

解决了，playwright mcp 连接，我们再来解决 Chrome devtools mcp 连接问题！

二、chrome DevTools MCP 解决方案

3 分钟教你解决

我遇到这个的原因是我的 MCP 配置中 type: "stdio" 不支持异步 npx 启动，可以采用下面协修大法来解决。

步骤 1：本地下载 chrome-devtools

使用这个指令，进行全局安装 chrome-devtools

npm install -g chrome-devtools-mcp @playwright/mcp

检查，安装是否成功，如果输出下面内容则证明你安装没有问题

步骤 2：修改配置信息

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

将上面这段配置信息替换为下面内容，即可解决

"chrome-devtools": {
      "type": "stdio",
      "command": "chrome-devtools-mcp"
    }

步骤 4：测试连接，自动启动浏览器

使用 claude mcp list 命令查看是否连接正常

你也可以在进入到 Claude Code 之后使用 /mcp 来查看连接是否正常

可以看到已经成功打开，到此问题解决！

到这里，本期教学就已经全部完成了，还在等什么，赶紧去试试你的 Claude Code！如果你觉得本期对你有所帮助，希望留下你的小爱心！！