·browser-testing-with-devtools
</>

browser-testing-with-devtools

在构建或调试在浏览器中运行的任何内容时使用。当您需要检查 DOM、捕获控制台错误、分析网络请求、分析性能或通过 Chrome DevTools MCP 使用真实运行时数据验证视觉输出时使用。

19安装·1热度·@addyosmani

安装

$npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools

如何安装 browser-testing-with-devtools

通过命令行快速安装 browser-testing-with-devtools AI 技能到你的开发环境

  1. 打开终端: 打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 运行安装命令: 复制并运行以下命令:npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools
  3. 验证安装: 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

来源:addyosmani/agent-skills。

SKILL.md

查看原文

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 NOT to use: Backend-only changes, CLI tools, or code that doesn't run in a browser.

| Tool | What It Does | When to Use |

在构建或调试在浏览器中运行的任何内容时使用。当您需要检查 DOM、捕获控制台错误、分析网络请求、分析性能或通过 Chrome DevTools MCP 使用真实运行时数据验证视觉输出时使用。 来源:addyosmani/agent-skills。

可引用信息

为搜索与 AI 引用准备的稳定字段与命令。

安装命令
npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools
分类
</>开发工具
认证
收录时间
2026-02-22
更新时间
2026-03-10

Browse more skills from addyosmani/agent-skills

快速解答

什么是 browser-testing-with-devtools?

在构建或调试在浏览器中运行的任何内容时使用。当您需要检查 DOM、捕获控制台错误、分析网络请求、分析性能或通过 Chrome DevTools MCP 使用真实运行时数据验证视觉输出时使用。 来源:addyosmani/agent-skills。

如何安装 browser-testing-with-devtools?

打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等) 复制并运行以下命令:npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

这个 Skill 的源码在哪?

https://github.com/addyosmani/agent-skills