Verified:GitHub

web-devtools-debug

Debug web apps and Chrome extensions via Chrome DevTools MCP.

Updated Aug 27, 2026

Search Tags:#chrome-devtools #web-app #network-monitoring #remote-debugging #dom-inspection #javascript-execution #extension-debugging

Ready to run

npx skills add https://github.com/RyoyaYahagi/skills --skill web-devtools-debug

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-devtools-debug
Source: https://github.com/RyoyaYahagi/skills/tree/main/web-devtools-debug
Command: npx skills add https://github.com/RyoyaYahagi/skills --skill web-devtools-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Remote debugging of web apps and Chrome extensions using Chrome DevTools MCP, enabling you to diagnose console errors, monitor network activity, inspect the DOM, execute JavaScript, and capture screenshots across remote contexts.

Core Features & Use Cases

Remote debugging via Chrome DevTools MCP for web apps and Chrome extensions
Page operations: navigate, click, type, screenshot, getPageContent
Debugging: evaluate, getConsoleMessages, getNetworkRequests
Inspection: getElements, getStyles
Workflows:
- Chrome extension debugging: open chrome://extensions/, inspect service workers, debug content scripts
- Web app debugging: load pages, check console, investigate network, inspect DOM

Quick Start

Launch Chrome with remote debugging enabled and connect your MCP workflow to start debugging a target page or Chrome extension.

Frequently Asked Questions about web-devtools-debug

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

FAQPage Schema

How do I remotely debug a web app using Chrome DevTools?▼

Remotely debug a web app by launching Chrome with remote debugging enabled, connecting an MCP workflow, and using commands like getConsoleMessages, getNetworkRequests, and evaluate to diagnose errors.

Can I inspect a Chrome extension service worker and content scripts remotely?▼

Yes, Chrome extension debugging works remotely by navigating to chrome://extensions/, inspecting service workers, and executing debugging commands against content scripts through the Chrome DevTools MCP.

How do I monitor network requests and inspect DOM elements on a remote page?▼

Monitor network requests and inspect DOM by issuing getNetworkRequests to capture traffic, getElements to locate nodes, and getStyles to retrieve computed CSS through MCP commands.

What is the best way to capture console errors during remote web app development?▼

Capture console errors by loading the target page with the navigate command and calling getConsoleMessages to retrieve all logged errors, warnings, and output for investigation.

Do I need to launch Chrome with specific flags to enable remote debugging?▼

Yes, you must launch Chrome with remote debugging enabled to connect an MCP workflow, allowing commands like screenshot, click, and type to interact with the target page or extension.

Can I execute custom JavaScript on a remote page during DOM inspection?▼

Yes, execute custom JavaScript by using the evaluate command to run scripts directly on the remote page, enabling dynamic DOM manipulation and state inspection.