chrome-devtools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chrome DevTools Skill

Control a real Chrome browser with Claude. The Chrome extension runs inside an authenticated browser session, allowing interaction with sites the user is already logged into -- Gmail, Google Docs, Notion, CRMs, and more.

借助Claude控制真实的Chrome浏览器。该Chrome扩展程序运行在已认证的浏览器会话中，允许与用户已登录的网站进行交互——包括Gmail、Google Docs、Notion、CRM系统等。

Overview

概述

Two integration paths exist: Claude Code + Chrome Extension (terminal-based browser control via

claude --chrome

) and Chrome DevTools MCP (26 browser automation tools via Model Context Protocol). Both operate on a real Chrome instance with existing logins, requiring no re-authentication. The Chrome extension also supports workflow shortcuts, scheduled recurring tasks, and multi-tab coordination independently of Claude Code.

存在两种集成路径：Claude Code + Chrome扩展程序（通过

claude --chrome

实现基于终端的浏览器控制）和Chrome DevTools MCP（通过Model Context Protocol提供26种浏览器自动化工具）。两者均在带有现有登录状态的真实Chrome实例上运行，无需重新认证。Chrome扩展程序还支持工作流快捷方式、定时重复任务以及独立于Claude Code的多标签页协调功能。

Quick Reference

快速参考

Integration	Setup	Best For
Claude Code + Extension	`claude --chrome`	Terminal-based browser control
Chrome DevTools MCP	`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`	Programmatic automation via MCP tools

Capability	Tools/Methods
Navigation	Navigate URLs, create/close/switch tabs, resize windows
Input	Click, type, fill forms, drag, hover, press keys, upload files
Extraction	Read page content, DOM state, console logs, network requests
Debugging	Screenshots, DOM snapshots, evaluate JavaScript, performance tracing
Emulation	Device emulation, viewport resizing
Recording	Record browser interactions as GIFs, save workflow shortcuts
Scheduling	Workflow shortcuts with daily/weekly/monthly/annual triggers

Requirement	Minimum
Google Chrome	Latest stable
Claude in Chrome Extension	1.0.36+
Claude Code CLI	2.0.73+
Claude Plan	Pro, Team, or Enterprise
Node.js (DevTools MCP)	20.19+

Not supported: Other Chromium browsers (Brave, Arc, Edge), WSL, headless mode (extension path only; DevTools MCP supports headless), mobile devices.

集成方式	设置方法	最佳适用场景
Claude Code + 扩展程序	`claude --chrome`	基于终端的浏览器控制
Chrome DevTools MCP	`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`	通过MCP工具实现程序化自动化

功能	工具/方法
导航	访问URL、创建/关闭/切换标签页、调整窗口大小
输入	点击、输入文本、填写表单、拖拽、悬停、按键、上传文件
提取	读取页面内容、DOM状态、控制台日志、网络请求
调试	截图、DOM快照、执行JavaScript、性能追踪
模拟	设备模拟、视口调整
录制	将浏览器交互录制为GIF、保存工作流快捷方式
定时	支持按日/周/月/年触发的工作流快捷方式

要求	最低版本
Google Chrome	最新稳定版
Claude in Chrome 扩展程序	1.0.36+
Claude Code CLI	2.0.73+
Claude 套餐	Pro、Team或Enterprise
Node.js（DevTools MCP）	20.19+

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

Common Mistakes

常见错误

Mistake	Correct Pattern
Running browser automation without `--chrome` flag	Start Claude Code with `claude --chrome` or enable Chrome by default via `/chrome` settings
Trying to take over existing tabs	Claude opens new tabs for tasks; it does not hijack tabs you already have open
Not handling CAPTCHAs and modal dialogs manually	Claude pauses at CAPTCHAs, login prompts, and modals; dismiss them yourself then tell Claude to continue
Using ambiguous instructions for form filling	Be specific about field names, values, and order; ambiguous prompts produce inconsistent results
Requesting all console logs without filtering	Specify log patterns or error types; requesting everything floods context with noise
Enabling Chrome by default without need	Increases context usage since browser tools are always loaded; use `--chrome` flag only when needed
Using DevTools MCP without `--scope user`	Add `--scope user` to make the MCP server available across all projects

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

Delegation

任务委派

Automate repetitive browser workflows across sites: Use
```
Task
```
agent with Chrome extension to fill forms, extract data, or navigate multi-step flows
Debug frontend issues with console and network inspection: Use
```
Explore
```
agent with DevTools MCP to capture console errors, network failures, and DOM state
Plan complex multi-tab data extraction pipelines: Use
```
Plan
```
agent to design the workflow steps before executing browser automation
Record and schedule recurring browser tasks: Use Chrome extension shortcuts with scheduling for daily/weekly automation

跨网站自动化重复浏览器工作流：使用Chrome扩展程序搭配
```
Task
```
agent来填写表单、提取数据或导航多步骤流程
通过控制台和网络检查调试前端问题：使用
```
Explore
```
agent搭配DevTools MCP捕获控制台错误、网络故障和DOM状态
规划复杂的多标签页数据提取流程：在执行浏览器自动化前，使用
```
Plan
```
agent设计工作流步骤
录制并定时执行重复浏览器任务：使用Chrome扩展程序的快捷方式搭配定时功能实现日/周度自动化

References

参考资料

Claude Code Chrome integration -- setup, capabilities, and how the extension communicates with Claude Code
Chrome DevTools MCP tools -- all 26 MCP tools organized by category with configuration options
Browser automation workflows -- common patterns for testing, data extraction, and content management
Workflow shortcuts and scheduling -- creating reusable shortcuts and scheduled recurring tasks
Troubleshooting and best practices -- fixing connection issues, handling dialogs, and security considerations

Claude Code Chrome 集成 —— 设置方法、功能以及扩展程序与Claude Code的通信机制
Chrome DevTools MCP 工具 —— 按类别整理的全部26种MCP工具及配置选项
浏览器自动化工作流 —— 测试、数据提取和内容管理的常见模式
工作流快捷方式与定时 —— 创建可复用快捷方式和定时重复任务
故障排除与最佳实践 —— 修复连接问题、处理对话框及安全注意事项