mcpField
D
devtools-mcp

devtools-mcp

本地服务
github.com/stefanli浏览器自动化2873 周前更新
代码仓库

关于 devtools-mcp

devtools-mcp 是一个为 LLM 提供 Chrome DevTools Protocol 访问能力的 MCP 服务。它面向需要通过 AI 操作浏览器的开发者，可以执行任意 CDP 命令，并将截图、PDF 等大型二进制数据保存为文件。

主要功能

  1. 01通过单一 cdp_command 工具执行任意 CDP 命令
  2. 02自动将截图、PDF 等二进制数据保存为文件
  3. 03返回文件路径而非原始数据

适用场景

  1. 01让 AI 助手导航页面并执行 Runtime.evaluate
  2. 02获取页面截图或 PDF 用于检查页面状态

MCP 相关

该项目是一个 MCP 服务，向 MCP 客户端暴露名为 cdp_command 的工具，客户端可通过它发送 CDP 方法名与参数。

#devtools#chrome#llm-access

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

暂未收录安装方式

我们还没有获取到这个服务的安装包或远程地址，请按项目 README 中的说明安装。

代码仓库

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

devtools-mcp

一个为大模型提供 Chrome DevTools Protocol 访问能力的 MCP 服务。

  • 通过 cdp_command 工具执行任意 CDP 命令
  • 自动处理二进制数据——较大的响应（截图、PDF）会保存到文件

设置

  1. 启动 Chrome 并启用远程调试：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --remote-debugging-address=127.0.0.1 \
  --user-data-dir=/tmp/chrome-debug \
  --no-first-run \
  --disable-default-apps
  1. 安装依赖：
npm install
  1. 将其添加为本地 MCP 服务。例如，使用 Claude Code：
claude mcp add devtools-server -- npx tsx ~/projects/devtools-mcp/src/index.ts

使用

该服务仅提供一个 cdp_command 工具，接受以下参数：

  • method：任意 CDP 命令（例如，“Page.navigate”“Runtime.evaluate”）
  • params：命令参数的 JSON 字符串（可选）

二进制数据（截图等）会自动保存到 ./cdp-output/，并返回文件路径引用，而非原始数据。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。