Mimo Code 免费体验 Mimo模型，安装Chrome devtools遇坑

最近Mimo Code刚推出无限免费试用 Mimo-pro 2.5 模型，我之前在opencode用了一下，感觉还行。所以下载了Mimo-Code继续想体验一下。反正趁着免费，继续用一下。之前在opencode上很容易就安装好了openspec，但是在Mimo-code上还是遇到了一点小波折，但是不算太值得写，然后安装chrome-devtools的时候发现有点曲折，于是可能需要这篇文章来让大家填一填这个“坑”。

备注：chrome-devtools 是让它操作浏览器的插件。安装它可以让它自动操作浏览器。广泛用于总结新闻，搜索信息，调试网站代码，找资料写文档。

在Mimo Code的解决方法

我已经做好了skill，如果你也需要在Mimo Code上安装chrome-devtools（浏览器自动化插件），请你把以下的文字复制给你的Mimo Code即可：

# 安装与配置指南

本指南将帮助您安装chrome-devtools-mcp插件并配置MCP服务器，以便AI助手能够控制Chrome浏览器。

## 前提条件

- Node.js LTS版本（建议18.x或更高）
- npm（随Node.js一起安装）
- Chrome浏览器（最新稳定版）
- OpenCode（或其他支持MCP的AI编码助手）

## 1. 安装chrome-devtools-mcp

### 全局安装

打开终端或命令提示符，执行以下命令：

```bash
npm install -g chrome-devtools-mcp
```

### 验证安装

安装完成后，验证是否成功：

```bash
npx chrome-devtools-mcp --version
```

如果显示版本号，说明安装成功。

## 2. 配置OpenCode MCP服务器

### 创建配置文件

在用户主目录下创建OpenCode配置文件：

**Windows:**
```powershell
New-Item -Path "$env:USERPROFILE\.config\opencode" -ItemType Directory -Force
```

**macOS/Linux:**
```bash
mkdir -p ~/.config/opencode
```

### 编写配置内容

创建 `opencode.json` 文件，内容如下：

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

### 验证配置

重启OpenCode会话，检查MCP工具是否可用。

## 3. 启动Chrome调试模式

### 方法一：以调试模式启动Chrome

**Windows:**
```powershell
& "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-debug-profile"
```

**macOS:**
```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-profile
```

**Linux:**
```bash
/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-profile
```

### 方法二：连接到现有Chrome实例

如果Chrome已经在运行，可以访问以下地址检查调试端口：
```
http://localhost:9222/json
```

## 4. 验证连接

### 检查调试端口

使用curl或浏览器访问：
```bash
curl http://localhost:9222/json
```

如果返回JSON数据，说明Chrome调试端口已启用。

### 测试MCP工具

在OpenCode中尝试使用chrome-devtools工具，例如：
```
列出当前浏览器页面
```

## 故障排除

### 问题1：npm命令未找到

**解决方案：** 确保Node.js和npm已正确安装，并添加到系统PATH。

### 问题2：Chrome调试端口无法访问

**解决方案：**
1. 确保没有其他Chrome实例在运行
2. 检查防火墙设置
3. 尝试使用不同端口

### 问题3：MCP服务器未加载

**解决方案：**
1. 检查配置文件路径是否正确
2. 重启OpenCode会话
3. 查看OpenCode日志获取错误信息

### 问题4：WebSocket连接失败

**解决方案：**
1. 确保Chrome以调试模式启动
2. 检查端口是否被占用
3. 尝试使用`--user-data-dir`指定新的用户数据目录

## 相关资源

- 官方文档：https://github.com/ChromeDevTools/chrome-devtools-mcp
- npm 包：https://www.npmjs.com/package/chrome-devtools-mcp

## 总结

通过以上步骤，你已经成功在 MiMo 上安装了 chrome-devtools-mcp 插件。现在 MiMo 可以帮你：
- 自动打开网页并截图
- 分析网页性能
- 执行自动化测试
- 调试前端代码

这样，你就可以让Agent操作浏览器了。

安装后，你可以让 MiMo：

打开网页并截图
分析网页性能
自动化表单填写
执行 JavaScript 脚本
监控网络请求