Browser Testing With Devtools
通过 Chrome DevTools MCP 在真实浏览器中进行测试。在构建或调试任何在浏览器中运行的内容时使用。当你需要检查 DOM、捕获控制台错误、分析网络请求、分析性能或使用真实运行时数据验证视觉输出时使用。需要配置 chrome-devtools MCP 服务器。
概览
使用 Chrome DevTools MCP 为你的智能体提供观察浏览器的视角。这弥补了静态代码分析与实时浏览器执行之间的差距 —— 智能体可以查看用户所见的内容、检查 DOM、读取控制台日志、分析网络请求并捕获性能数据。与其猜测运行时发生了什么，不如直接验证它。
使用场景
安装说明
# Review source first
open https://github.com/addyosmani/agent-skills/blob/main/skills/browser-testing-with-devtools/SKILL.md将审核过的技能文件夹复制到兼容智能体使用的 skills 目录中。
安全提示
AIToolly 已自动验证发布的源结构和许可证。在授予工作区、命令或网络访问权限之前，请再次检查 addyosmani/agent-skills 及任何捆绑的脚本。
相关 Skills
MCP Builder
anthropics/skills
创建高质量 MCP (Model Context Protocol) 服务器的指南，使 LLM 能够通过设计良好的工具与外部服务进行交互。在构建 MCP 服务器以集成外部 API 或服务时使用，无论是使用 Python (FastMCP) 还是 Node/TypeScript (MCP SDK)。
Claude API
anthropics/skills
Claude API / Anthropic SDK 参考指南——模型 ID、定价、参数、流式传输、工具使用、MCP、Agent、缓存、Token 计数、模型迁移。 TRIGGER——在打开目标文件前阅读 BEFORE；不要因为它“看起来像一行代码”而跳过——无论何时：提示词中以任何形式提及 Claude/Anthropic（Claude、Anthropic、Fable、Opus、Sonnet、Haiku、`anthropic`、`@anthropic-ai`、`claude-*`、`us.anthropic.*`、`[1m]`）；用户询问有关 LLM 的问题（定价/模型选择/限制/缓存）——切勿回答
Skill Creator
anthropics/skills
创建新技能、修改和改进现有技能，并衡量技能性能。适用于用户希望从零开始创建技能、编辑或优化现有技能、运行评估以测试技能、通过方差分析对技能性能进行基准测试，或优化技能描述以提高触发准确性的场景。
API And Interface Design
addyosmani/agent-skills
指导稳定的 API 和接口设计。适用于设计 API、模块边界或任何公共接口。在创建 REST 或 GraphQL 端点、定义模块间的类型契约或建立前后端边界时使用。
Windows Builder
hashicorp/agent-skills
使用 Packer、WinRM 通信器和 PowerShell 配置程序构建 Windows 镜像。适用于创建 Windows AMIs、Azure 镜像或 VMware 模板。