skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

browser-devtools-mcp-vscode

Integrate a Browser DevTools MCP server into VS Code via Playwright for automated browser testing.

4|Updated May 16, 2026
Search Tags:#browser automation#mcp#playwright#core web vitals#vscode extension#accessibility audit#network mocking
One-click install
npx skills add https://github.com/Aradotso/devtools-skills --skill browser-devtools-mcp-vscode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-devtools-mcp-vscode
Source: https://github.com/Aradotso/devtools-skills/tree/main/skills/browser-devtools-mcp-vscode
Command: npx skills add https://github.com/Aradotso/devtools-skills --skill browser-devtools-mcp-vscode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of testing, debugging, and validating real web behavior with AI guidance without manually operating browsers and developer tooling step-by-step.

Core Features & Use Cases

  • AI-enabled browser automation via MCP: Control navigation, interactions, and visual evidence generation through an IDE-integrated MCP server.
  • Testing, debugging, and validation workflows: Capture screenshots, run accessibility audits, inspect React component trees, and measure Core Web Vitals.
  • Network observation and API mocking: Record network requests and mock/unmock routes to stabilize frontend testing.

Quick Start

Tell your AI assistant: "Open Browser DevTools MCP in VS Code, navigate to https://example.com, then capture a full-page screenshot and run an accessibility audit."

Frequently Asked Questions about browser-devtools-mcp-vscode

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

FAQPage Schema
How do I run AI-assisted browser automation and testing directly inside VS Code?▼

AI-assisted browser automation inside VS Code is enabled by integrating a Browser DevTools MCP server via Playwright to control navigation, interactions, and visual evidence generation.

Can I capture screenshots and measure Core Web Vitals for web pages using an MCP server?▼

Yes, the MCP server supports capturing full-page screenshots and measuring Core Web Vitals during automated Playwright browser execution to validate real web behavior.

How do I mock network requests to stabilize frontend testing in VS Code?▼

You can mock network requests by recording network traffic and applying route mocking or unmocking through the integrated DevTools MCP server to stabilize frontend testing.

Does this MCP server support running accessibility audits and inspecting React component trees?▼

Yes, the server applies AI guidance to run accessibility audits, inspect React component trees, and perform automated navigation without manual developer tooling operations.

Do I need to manually register the MCP server to use Playwright for browser debugging?▼

Yes, IDE MCP server registration is required to execute Playwright browser instances and utilize tool support for network inspection, mocking, and reporting.

What is the best way to perform visual testing and web page validation without operating browser devtools step-by-step?▼

The best way to perform visual testing without manual operation is using an AI-driven Browser DevTools MCP integration that automates interaction, screenshot generation, and network observation.

Related Skills

Explore More Software Engineering Skills→
rhpdsrhpds

06-playwright-mcp

Configure and validate the Playwright MCP server for Claude Code browser automation.

Official
Advanced
mpsuessermpsuesser

web-perf

Measure Core Web Vitals and diagnose page-load bottlenecks using Chrome DevTools traces.

Community
Advanced
edjan11edjan11

webapp-testing

Automate testing and debugging of local web applications with Playwright.

Community
Intermediate
hlbbbbbbbhlbbbbbbb
6

dev-browser

Control a Playwright browser instance for web automation and data scraping.

Community
Advanced