Browser Testing with DevTools

addyosmani/agent-skills

Inspect DOM, console, network and runtime behavior through Chrome DevTools MCP to investigate browser bugs.

Inhalt aktualisiert:

Auf GitHub ansehen
npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools
116.280Sterne12.180ForksLetzter Repository-Push

Über diesen Skill

Inspect DOM, console, network and runtime behavior through Chrome DevTools MCP to investigate browser bugs. Connect Chrome DevTools MCP, reproduce the user path and gather DOM, console and network evidence before judging the result.

Warum wir es empfehlen

A task workflow in Addy's Agent Skills. Follow the upstream instructions and retain referenced shared files; host capabilities and project configuration determine which steps can run.

Wobei es hilft

  • A UI behaves differently in the browser than the source code suggests.

Workflow and deliverables

Connect Chrome DevTools MCP, reproduce the user path and gather DOM, console and network evidence before judging the result.

Browser observations, screenshots or traces and a scenario-based verification record tied to actual runtime behavior.

Browser Testing with DevTools instructions

Install with the required references

Install the complete pack through a documented repository integration when shared references are needed. A per-skill skills CLI install copies only skills/<name>/ and can omit the repository-level references/ checklists; keep the needed shared files with the workflow.

Upstream overview and integrations

Vor der Nutzung

  • An Agent that can load Skill Markdown and access your project. File edits, shell commands, builds and checks depend on the selected workflow and its environment.
  • Use your project's own runtimes, dependencies and verification commands. The Skill files provide instructions and do not install those project tools.
  • Install the complete pack through a documented repository integration when shared references are needed. A per-skill skills CLI install copies only skills/<name>/ and can omit the repository-level references/ checklists; keep the needed shared files with the workflow.
  • Requires a configured Chrome DevTools MCP server and access to the browser under investigation.

Unterstützte Agents

Claude CodeCodex CLICursorGitHub CopilotGemini CLIOpenCodeKiroGoogle Antigravity

Quellen und Referenzen

Die Originalquellen sind unten verlinkt. Praktische Einstiegsideen sind redaktionelle Vorschläge von SkillHey.