SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场chrome-devtools

chrome-devtools

测试与质量

查看项目

更新于 10-15 18:31

技能介绍

用途

Chrome DevTools 是一个通过可执行 Puppeteer 脚本实现浏览器自动化、调试与性能分析的技能。所有脚本输出 JSON，便于解析。它适合需要以脚本方式驱动浏览器完成导航、截图、交互、数据提取和性能测量的任务。

主要能力

核心自动化脚本包括：

  • navigate.js：导航到指定 URL
  • screenshot.js：截取整页或指定元素截图
  • click.js：点击元素
  • fill.js：填写表单字段
  • evaluate.js：在页面上下文中执行 JavaScript

分析与监控脚本包括：

  • snapshot.js：提取带元数据的交互元素
  • console.js：监控控制台消息与错误
  • network.js：追踪 HTTP 请求与响应
  • performance.js：测量 Core Web Vitals 并记录 trace

截图自动压缩：当截图超过 5MB 时会自动压缩，以确保兼容 Gemini API 和 Claude Code（两者均有 5MB 限制）。该功能依赖 ImageMagick。压缩行为：PNG 会缩放至 90% 并设置质量 85（若仍过大则缩放至 75% 并设置质量 70）；JPEG 使用质量 80 加渐进式编码（若仍过大则质量 60）；其他格式会转换为 JPEG 并压缩。可通过 --max-size 自定义阈值，或使用 --no-compress 禁用压缩。

使用方式

安装步骤：

  1. 系统依赖（仅 Linux/WSL）：进入 .claude/skills/chrome-devtools/scripts 目录，运行 ./install-deps.sh，支持 Ubuntu、Debian、Fedora、RHEL、CentOS、Arch、Manjaro。macOS/Windows 可跳过此步。
  2. Node 依赖：运行 npm install，安装 puppeteer、debug、yargs。
  3. ImageMagick（可选，推荐）：macOS 使用 brew install imagemagick；Ubuntu/Debian/WSL 使用 sudo apt-get install imagemagick。可用 magick -version 或 convert -version 验证。

测试命令： node navigate.js --url https://example.com

单命令示例： node screenshot.js --url https://example.com --output ./docs/screenshots/page.png

链式命令（复用浏览器）： node navigate.js --url https://example.com/login --close false node fill.js --selector "#email" --value "user@example.com" --close false node fill.js --selector "#password" --value "secret" --close false node click.js --selector "button[type=submit]"

解析 JSON 输出： node performance.js --url https://example.com | jq '.vitals.LCP' node network.js --url https://example.com --output /tmp/requests.json

所有脚本支持通用选项：--headless false 显示浏览器窗口；--close false 保持浏览器打开以便链式调用；--timeout 30000 设置超时（毫秒）；--wait-until networkidle2 设置等待策略。

适用场景

  • 网页抓取：使用 evaluate.js 提取页面数据
  • 性能测试：使用 performance.js 测量 LCP 等指标
  • 表单自动化：使用 fill.js 与 click.js 完成登录或搜索
  • 错误监控：使用 console.js 监控 error 与 warn 消息

限制与注意事项

执行前必须用 pwd 确认工作目录，确保位于 .claude/skills/chrome-devtools/scripts/ 目录，输出文件应使用绝对路径。截图后应验证文件是否创建并检查 JSON 中的 success:true。若脚本失败，可用 snapshot.js 发现正确的选择器，或尝试 XPath 选择器。常见错误包括：找不到 puppeteer 包需运行 npm install；Linux/WSL 缺少 libnss3.so 等系统库需运行 ./install-deps.sh；浏览器启动失败需检查系统依赖与 Chrome 下载情况。截图超过 5MB 时需安装 ImageMagick 或调整阈值、改用 JPEG、或仅截取指定元素。

详细参考文档位于 ./references/，包括 CDP Domains 参考（47 个 Chrome DevTools Protocol 域）、Puppeteer 快速参考、性能分析指南。高级用法支持自定义脚本（导入 ./lib/browser.js 中的 getBrowser、getPage、closeBrowser、outputJSON）以及直接 CDP 访问（如 Emulation.setCPUThrottlingRate）。