mcpField
C
chrome-devtools

chrome-devtools

github.com/oakoss生产力20138 次安装11 周前更新
代码仓库

关于 chrome-devtools

chrome-devtools 是通过 Claude 控制真实 Chrome 浏览器的技能，可使用已有登录状态。它涵盖基于扩展的 Claude Code 操作，以及通过 Chrome DevTools MCP 执行浏览器任务和调试。

主要功能

  1. 01控制已登录的 Chrome 会话
  2. 02导航标签页并操作网页
  3. 03检查 DOM、控制台和网络数据
  4. 04捕获屏幕截图与性能跟踪
  5. 05录制并定时运行浏览器工作流

适用场景

  1. 01在已登录网站自动填写表单
  2. 02检查前端控制台和网络错误
  3. 03跨多个标签页提取数据
  4. 04定时执行重复浏览器任务

MCP 相关

Chrome DevTools MCP 提供 26 种浏览器自动化工具，可编程控制真实 Chrome 实例。该技能也说明了如何通过 Claude Code 和 Chrome 扩展进行设置与使用。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oakoss/agent-skills --skill chrome-devtools

安装后在 Claude Code 中输入/chrome-devtools确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
automation-workflows.md
claude-code-integration.md
devtools-mcp.md
shortcuts-scheduling.md
troubleshooting.md

详细介绍

Chrome DevTools Skill

通过 Claude 控制真实的 Chrome 浏览器。Chrome 扩展在已登录的浏览器会话中运行，可与用户已登录的网站交互，例如 Gmail、Google Docs、Notion、CRM 等。

概览

有两种集成方式：Claude Code + Chrome Extension（通过 claude --chrome 在终端中控制浏览器）和 Chrome DevTools MCP（通过 Model Context Protocol 提供 26 种浏览器自动化工具）。两种方式都可操作已登录账号的真实 Chrome 实例，无需重新进行身份验证。Chrome 扩展还支持工作流快捷方式、定期计划任务和多标签页协同，且无需依赖 Claude Code。

快速参考

集成方式设置最适合
Claude Code + Extensionclaude --chrome在终端中控制浏览器
Chrome DevTools MCPclaude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest通过 MCP 工具进行程序化自动化
功能工具/方法
导航导航至 URL、创建/关闭/切换标签页、调整窗口大小
输入点击、输入文字、填写表单、拖动、悬停、按键、上传文件
内容提取读取页面内容、DOM 状态、控制台日志、网络请求
调试截图、DOM 快照、执行 JavaScript、性能跟踪
模拟设备模拟、调整视口大小
录制将浏览器交互录制为 GIF、保存工作流快捷方式
计划任务设置每日/每周/每月/每年触发的工作流快捷方式
要求最低版本
Google Chrome最新稳定版
Claude in Chrome Extension1.0.36+
Claude Code CLI2.0.73+
Claude PlanPro、Team 或 Enterprise
Node.js（DevTools MCP）20.19+

不支持：其他 Chromium 浏览器（Brave、Arc、Edge）、WSL、无头模式（仅扩展方式不支持；DevTools MCP 支持无头模式）、移动设备。

常见错误

错误正确做法
运行浏览器自动化时未使用 --chrome 标志使用 claude --chrome 启动 Claude Code，或通过 /chrome 设置默认启用 Chrome
尝试接管现有标签页Claude 会为任务打开新标签页；不会劫持你已打开的标签页
未手动处理 CAPTCHA 和模态对话框Claude 会在遇到 CAPTCHA、登录提示和模态对话框时暂停；请自行关闭，然后告诉 Claude 继续
使用含糊的表单填写说明明确说明字段名称、值和顺序；含糊的提示词会导致结果不一致
未经筛选就请求所有控制台日志指定日志模式或错误类型；请求所有日志会让上下文充斥无关信息
在不需要时默认启用 Chrome浏览器工具始终处于加载状态，会增加上下文用量；仅在需要时使用 --chrome 标志
使用 DevTools MCP 时未添加 --scope user添加 --scope user，使 MCP 服务可用于所有项目

委派

  • 自动化跨网站的重复浏览器工作流：使用带有 Chrome 扩展的 Task Agent 填写表单、提取数据或执行多步操作
  • 通过控制台和网络检查调试前端问题：使用 Explore Agent 和 DevTools MCP 捕获控制台错误、网络故障和 DOM 状态
  • 规划复杂的多标签页数据提取流程：使用 Plan Agent 在执行浏览器自动化前设计工作流步骤
  • 记录并安排周期性浏览器任务：使用 Chrome 扩展快捷方式并设置计划，以自动执行每日／每周任务

参考资料

评论

支持 Markdown