browser-testing-with-devtools

仓库创建 2026年7月5日最近提交 22 天前SkillHot 收录 22 天前

▸ 精选理由

能让代理直接“看到”浏览器运行时，适合调试前端与端到端测试。

▸ 风险提示

需要开启远程调试或访问浏览器实例，可能暴露敏感页面内容或端口。

这个 Skill 做什么

通过 Chrome DevTools MCP 在真实浏览器中进行 DOM、日志与网络级调试与测试。

用 Chrome DevTools MCP 在真机浏览器里看运行时：检查 DOM、抓 console 错误、分析网络请求和性能剖面，避免靠猜测定位问题。调试前端难重现的运行时 bug 或要验证真实渲染与网络流量时会用。需要把 chrome-devtools MCP 服务先配置好。

▸ 展开 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.

开发编程浏览器测试DOM 检查网络分析Cursor

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

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

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/kulapoo/opencode-agent-harness/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 公开信息 · 原文版权归作者所有