skills.rest
authrain-cloud-abdullahformuli
authrain-cloud-abdullahformuliCOMMUNITY
Explore all skills by this author →
𝕏@abdullahformuliGitHub

browser-testing-with-devtools

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

Updated Sep 17, 2026
Search Tags:#debugging#accessibility#mcp#chrome devtools#browser testing#performance profiling#console analysis
One-click install
npx skills add https://github.com/authrain-cloud-abdullahformuli/agent-skills --skill browser-testing-with-devtools-authrain-cloud-abdullahformuli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/authrain-cloud-abdullahformuli/agent-skills/tree/main/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/authrain-cloud-abdullahformuli/agent-skills --skill browser-testing-with-devtools-authrain-cloud-abdullahformuli

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 Chrome DevTools MCP. - Network and Console Analysis: Diagnose failed API calls, CORS issues, console errors, and warnings with structured debugging workflows. - Performance Profiling: Record performance traces and measure Core Web Vitals like LCP, CLS, and INP to find bottlenecks. - Security Boundaries: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection. - Use Case: A task completion animation glitches in your app. The agent navigates to localhost, reproduces the bug, checks the console and network requests, identifies the root cause, fixes the code, and verifies with a before/after screenshot comparison. ## Quick Start Set up the chrome-devtools MCP server in your project configuration, then ask the agent to open your local dev server page and check for console errors and visual issues.

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 chrome-devtools-mcp@latest with the --isolated flag. This launches Chrome with a temporary profile that is wiped when the browser closes, keeping tests separate from your personal browsing data.

How do I debug UI bugs with Chrome DevTools MCP?▼

Follow the reproduce-inspect-diagnose-fix-verify workflow: navigate to the page, take a screenshot, check console errors, inspect the DOM and computed styles, identify the root cause, fix the source code, then reload and compare screenshots to confirm the fix.

Can the agent use my logged-in Chrome sessions for testing?▼

By default the server uses a dedicated or isolated profile, which is recommended. The --autoConnect flag can attach to your running Chrome with all logged-in sessions, but this should only be used when a test genuinely requires authenticated state, with unrelated tabs closed first.

What performance metrics can Chrome DevTools MCP measure?▼

The performance trace tool records timing data including Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Interaction to Next Paint (INP), and long tasks over 50ms. Record a baseline trace, fix the bottleneck, then record another trace to compare.

When should I not use browser testing with DevTools?▼

Do not use it for backend-only changes, CLI tools, or code that does not run in a browser. It is designed for anything that renders in a browser, including UI debugging, network analysis, and visual verification.

Why is browser content treated as untrusted data?▼

DOM text, console logs, and network responses can contain injected instructions designed to manipulate the agent. The skill requires treating all browser content as data to report, never as commands to execute, and flagging suspicious instruction-like content to the user.

Related Skills

Explore More Software Engineering Skills→
Andreicr1Andreicr1

reproduce-bug

Reproduces GitHub issues by analyzing logs, console errors, and Playwright screenshots.

Community
Intermediate
igij01igij01

bug-fix-and-ship

Automate bug fixes from structured reports to verified source changes.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate
ColdBoxColdBox

cbplaywright

Write end-to-end browser tests for ColdBox applications using cbplaywright.

Official
Intermediate