Chrome Devtools

🛠️ 官方级浏览器调试与自动化工具

由 Google Chrome 官方团队维护的 MCP 技能,可将 DevTools 的强大调试功能直接集成到 AI 工作流中,实现自动化测试与智能故障排查。

收藏
9.7k
安装
2.4k
版本
0.1.1
CLS 安全性认证2026-05-13
点击查看完整报告 >

使用说明

核心用法

chrome-devtools 是一款将 Google Chrome DevTools 能力通过 MCP (Model Context Protocol) 提供给 AI Agent 的技能。它允许大模型直接操控浏览器,执行导航、截图、点击、填表、性能追踪等一系列操作。其工作流模式清晰:导航到页面 → 等待元素加载 → 获取页面快照 (Accessibility Tree) → 基于 uid 进行交互。该技能是纯文档型配置,实际驱动依赖于 chrome-devtools-mcp 包,非常适合自动化测试、网页数据抓取、页面异常调试及性能分析等场景。

显著优点

1. 官方背景与高可信度:由 Google Chrome DevTools 团队 直接维护并在 Apache-2.0 协议下开源,来源可信度为最高的 T1 级别,确保了代码质量和长期维护性。
2. 极致轻量与零依赖:Skill 本身为纯配置文档,不含复杂代码逻辑,无外部恶意依赖,审计得分为 96 分,极大降低了引入漏洞的风险。

3. 专业的调试能力:继承了 Chrome DevTools 的原生能力,支持性能分析 (Traces)、网络请求检查、控制台脚本执行等进阶功能,远超普通自动化工具的文本处理范畴。

4. 持久化测试环境:通过持久化 Chrome Profile,可以在多次调试会话中保留登录状态、Cookie 和本地存储,极大方便了需要鉴权的长流程测试。

潜在缺点

1. 版本漂移风险:配置中使用了 chrome-devtools-mcp@latest,每次启动动态拉取最新版,若未来 npm 包遭供应链攻击(如维护者账号被盗),会存在潜在安全敞口。
2. 沙箱降级配置:默认参数关闭了 Chrome 的内部沙箱机制,这虽是容器化部署的必要设置,但在非容器环境下会降低对抗恶意网页利用的防护强度。

3. 状态污染可能:持久化 Profile 在方便保持登录的同时,也可能因浏览器缓存或扩展程序干扰,导致调试结果不具备隔离性和复现性。

适合的目标群体

  • 前端开发与测试工程师:需要对复杂交互逻辑进行自动化回归测试和 UI 异常监控的开发者。
  • DevOps 与 CI/CD 维护者:在 Docker 或云端流水线中集成无头浏览器,进行端到端健康检查的团队。
  • 数据抓取与监控人员:需要抓取需执行 JS 渲染的动态网页,并分析网络请求的后端工程师。

使用风险

  • 隐私与残留风险:由于使用持久化 Profile,浏览器中的 Cookie、历史记录会保存于磁盘,需注意不应在共享服务器或个人敏感环境中随意启用,以免造成凭据泄露。
  • 环境依赖限制:该技能严重依赖系统环境对 Chrome 的支持,若 MCP 运行环境缺少必要的系统库或内核支持,会导致浏览器启动失败。
  • 供应链安全:若未锁定版本号,当上游 chrome-devtools-mcp 发布包含意外 Bug 或引入不兼容变更的新版本时,可能导致自动化产线大规模中断。建议生产环境锁定明确的语义化版本。

安全解读

核心功能

本 Skill 通过 MCP 协议集成 Chrome DevTools,提供专业的网页调试和浏览器自动化能力。主要功能包括:页面导航与生命周期管理、DOM 快照与元素交互(点击、填充等)、性能分析与网络请求监控、以及 JavaScript 脚本执行。

使用流程

1. 启动与导航:首次调用自动启动 Chrome,使用持久化配置文件
2. 页面管理:通过 list_pages 查看可用页面,select_page 切换上下文

3. 内容获取take_snapshot 获取带 uid 的页面结构,用于精准元素操作

4. 数据优化:支持分页、过滤和大文件输出路径配置,提升效率

显著优势

  • 官方权威:Google Chrome DevTools 团队直接维护,39,426 Stars 社区验证
  • 零代码风险:纯文档型配置,无任何可执行代码
  • 自动化友好:文本快照模式比截图更适合批量自动化流程
  • 并行执行:支持多工具调用并行,保持 navigate → wait → snapshot → interact 顺序

局限性与注意事项

  • 环境依赖:需本地安装 Chrome 浏览器,容器环境需 --no-sandbox 配置
  • 动态页面:元素 uid 可能随页面变化失效,需及时刷新快照
  • 非视觉场景:文本快照不包含完整样式信息,视觉调试需配合截图

适合人群

  • 前端开发者进行 Bug 复现和调试
  • QA 工程师构建自动化测试流程
  • 性能工程师分析页面加载瓶颈
  • 需要浏览器自动化的数据抓取场景

风险提示

  • 沙箱配置:默认启用 --no-sandbox 以兼容容器,本地环境建议移除
  • 版本更新:使用 @latest 标签,建议订阅官方 Releases 获取安全更新
  • MCP 服务器安全性最终取决于运行环境和 Chrome 配置

Chrome Devtools 内容

手动下载zip · 1.6 kB
skill.jsonapplication/json
请选择文件