skills.rest
CodeCrafterAdi2006
CodeCrafterAdi2006COMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-testing-with-devtools

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

Updated Jul 10, 2026
Search Tags:#debugging#mcp#chrome devtools#browser testing#performance profiling#ui verification#console errors
One-click install
npx skills add https://github.com/CodeCrafterAdi2006/Ink-and-Code --skill browser-testing-with-devtools-codecrafteradi2006
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/CodeCrafterAdi2006/Ink-and-Code/tree/main/Skills/browser-testing-with-devtools
Command: npx skills add https://github.com/CodeCrafterAdi2006/Ink-and-Code --skill browser-testing-with-devtools-codecrafteradi2006

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, console logs, and the accessibility tree through Chrome DevTools MCP. - 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: Enforces profile isolation, treats all browser content as untrusted data, and restricts JavaScript execution to read-only inspection. - Use Case: A CSS change breaks your layout. The agent navigates to localhost, screenshots the broken state, inspects computed styles, fixes the source, reloads, and confirms with a clean console and a matching after-screenshot. ## 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 verify it renders without console errors.

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 issues with Chrome DevTools MCP?▼

Follow the reproduce-inspect-diagnose-fix-verify workflow: navigate to the page, screenshot the bug, check console errors, inspect the DOM and computed styles, 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 attaches to your running Chrome with all logged-in sessions exposed, so only use it when a test genuinely requires authenticated state and close unrelated tabs first.

When should I not use browser testing with DevTools MCP?▼

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, runtime behavior, network activity, and performance in an actual browser environment.

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→
PrekzursilPrekzursil

visual-review

Capture screenshots of web pages, local files, and presentations with Playwright.

Community
Intermediate
pulsemcppulsemcp

test-in-staging

Deploy the current branch to staging and run end-to-end verification checks.

Official
Advanced
dthuy62dthuy62

ck:test

Run automated tests, coverage checks, and build verification for web and Flutter applications.

Community
Advanced
hospitaljobsinhospitaljobsin
7

e2e-testing-patterns

Provide end-to-end testing patterns for Playwright and Cypress.

Official
Advanced