browser-testing-with-devtools

仓库创建 2026年2月16日最近提交 1 天前SkillHot 收录 20 天前

▸ 精选理由

能把静态分析补足为实时页面可视化与性能/日志检测的能力。

▸ 风险提示

需远程控制浏览器并启用调试端口，可能访问用户页面与敏感数据。

这个 Skill 做什么

通过Chrome DevTools让Agent在真实浏览器中进行检查与调试。

通过 Chrome DevTools 的 MCP 接口，让 Agent 在真实浏览器里检查 DOM、抓取 console 错误、分析网络请求和性能数据，还能验证视觉输出是否符合预期。适合调试前端、排查运行时问题或需要看到浏览器真实行为的时候使用。特别之处是把静态代码分析和真实浏览器运行结合，能直接用运行时数据做判断。

▸ 展开 SKILL.md 英文原文

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

开发编程浏览器测试DevTools实时调试通用

8.1w

Stars

8.7k

Forks

仓库内 Skill

+10.0k

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/addyosmani/agent-skills/main/skills/browser-testing-with-devtools/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/addyosmani/agent-skills/main/skills/browser-testing-with-devtools/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Browser Testing with DevTools

## Overview

Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it.

## When to Use

- Building or modifying anything that renders in a browser
- Debugging UI issues (layout, styling, interaction)
- Diagnosing console errors or warnings
- Analyzing network requests and API responses
- Profiling performance (Core Web Vitals, paint timing, layout shifts)
- Verifying that a fix actually

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有