chrome-devtools-mcp vs filesystem

并排对比，帮你在这两个 MCP server 之间做选择。

	chrome-devtools-mcp by benjaminr	filesystem by modelcontextprotocol
Stars	★ 297	★ 85,748
30天用量	—	—
综合分	48	77
官方	—	✓
分类	开发者工具浏览器自动化可观测性	本地文件系统开发者工具效率工具
实现语言	Python	TypeScript
最近提交	7 个月前	本月

chrome-devtools-mcp · 概述

Chrome DevTools MCP 服务器通过连接 Chrome 的调试功能，让 Claude 能够调试网页应用。

filesystem · 概述

功能丰富的文件系统操作 MCP 服务器，具有动态目录访问控制功能。

chrome-devtools-mcp · 使用场景

通过监控网络请求和响应来调试网页应用中的 API 调用
检查 JavaScript 对象和控制台错误以诊断前端问题
分析性能指标并识别网页应用的加载瓶颈

filesystem · 使用场景

使 AI 模型能够读取和写入项目文件进行开发
允许 Claude 或其他 MCP 客户端浏览和分析代码库
为内容生成提供对特定目录的安全沙盒访问

chrome-devtools-mcp · 安装

安装选项

Claude Desktop 扩展（最简单）

从 [发布页面](https://github.com/benjaminr/chrome-devtools-mcp/releases) 下载最新的 .dxt 文件
打开 Claude Desktop
转到扩展部分并安装下载的 .dxt 文件

手动 Claude Desktop 设置

将以下内容添加到 Claude Desktop 配置文件中：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

MCP CLI

mcp install server.py -n "Chrome DevTools MCP" --with-editable .

Claude Code

uv sync
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

filesystem · 安装

安装

使用 NPX

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/path/to/allowed/directory"
      ]
    }
  }
}

使用 Docker

{
  "mcpServers": {
    "filesystem": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "--mount", "type=bind,src=/path/to/allowed/dir,dst=/projects/allowed/dir",
        "mcp/filesystem",
        "/projects"
      ]
    }
  }
}

VS Code 扩展

点击 README 中的安装按钮直接在 VS Code 中安装。

对比内容由 README + GitHub 公开数据自动生成，定期更新。