skills.rest
RyoyaYahagi
RyoyaYahagiCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/RyoyaYahagi/skills --skill web-devtools-debug
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
mxyhimxyhi
467

chrome-cdp

Control local Chrome sessions via the Chrome DevTools Protocol.

Community
Intermediate
proffesor-for-testingproffesor-for-testing
436

bug-reporting-excellence

Create structured bug reports with reproduction steps and environment details.

Community
Advanced
browserbasebrowserbase
3.7k

Browser Automation

Automate browser interactions with persistent Playwright sessions via CLI commands.

Official
Advanced
chainreactorschainreactors
235

playwright

Automate headless Chromium browser interactions for security testing and vulnerability verification.

Official
Advanced