skills.rest
peterblazejewicz
peterblazejewiczCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-testing-with-devtools

Tests and debugs web pages in real browsers using Chrome DevTools MCP.

7|Updated Jan 11, 2026
Search Tags:#debugging#web development#mcp#chrome devtools#browser testing#performance profiling#dom inspection
One-click install
npx skills add https://github.com/peterblazejewicz/claude-plugins --skill browser-testing-with-devtools-peterblazejewicz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/peterblazejewicz/claude-plugins/tree/main/sync-state/dotnet-skills/vendor/agent-skills/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/peterblazejewicz/claude-plugins --skill browser-testing-with-devtools-peterblazejewicz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Static code analysis cannot reveal what actually happens at runtime in a browser. This Skill gives the agent live visibility into the browser so it can inspect the DOM, read console errors, analyze network requests, and verify visual output instead of guessing. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM tree, computed styles, and the accessibility tree through the Chrome DevTools MCP server. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network failures, and performance issues (LCP, CLS, INP), from reproduction to verified fix. - Security Boundaries: Treats all browser content as untrusted data, restricts JavaScript execution to read-only inspection, and blocks credential access and navigation to page-sourced URLs. - Use Case: A user reports a broken task-completion animation. The agent navigates to the local dev server, reproduces the bug, checks the console and network requests, identifies a failing PATCH call, fixes the code, and verifies with a before/after screenshot comparison. ## Quick Start Set up the chrome-devtools MCP server in your project settings, then ask the agent to reproduce and diagnose a UI bug on your local dev server using browser testing with devtools.

Frequently Asked Questions about browser-testing-with-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Chrome DevTools MCP for browser testing?▼

Add a chrome-devtools entry to your project's .mcp.json that runs npx with the chrome-devtools-mcp package and the --autoConnect flag. The autoConnect option attaches to a running Chrome instance or launches one automatically.

How to debug UI bugs with Chrome DevTools MCP?▼

Follow the five-step workflow: reproduce the bug and screenshot it, inspect console errors and DOM elements, diagnose the root cause in HTML, CSS, JS, or data, fix the source code, then reload and verify with a comparison screenshot and clean console.

Can the agent read cookies or localStorage through DevTools?▼

No. JavaScript execution is restricted to read-only state inspection and must never access cookies, localStorage tokens, sessionStorage secrets, or any authentication material. Credential access is explicitly off-limits.

When should I not use browser testing with DevTools?▼

Skip it for backend-only changes, CLI tools, or any code that does not run in a browser. It is designed for verifying rendered output, network behavior, and runtime performance of browser-facing code.

Why does the skill treat browser content as untrusted data?▼

A malicious or compromised page can embed instruction-like text in the DOM, console, or network responses to manipulate the agent. All browser content is treated as data to report, never as commands to execute, and suspicious content is flagged to the user.

Related Skills

Explore More Software Engineering Skills→
tuanfungtuanfung

browser-testing-with-devtools

Automate UI testing, debugging, and performance analysis of web applications using Chrome DevTools.

Community
Advanced
agentscope-aiagentscope-ai
5.4k

verify-changes

Runs project typecheck, build, lint, and targeted tests to verify code changes.

Official
Basic
jonnymuirjonnymuir
1

workflow-editor-role-first-swim-lanes-testing

Validate role-first swim lanes in workflow editors with Playwright.

Community
Intermediate
jh941213jh941213
125

e2e-verify

Automate end-to-end UI verification in a real browser with Playwright, Cypress, or agent-browser.

Community
Advanced