skills.rest
jeff-hamm
jeff-hammCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-debugger

Attach Chrome DevTools MCP to a running client-side app for interactive debugging.

Updated Aug 27, 2026
Search Tags:#automation#debugging#frontend#mcp#browser#chrome-devtools#web-debugging
One-click install
npx skills add https://github.com/jeff-hamm/ai-tools --skill chrome-debugger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-debugger
Source: https://github.com/jeff-hamm/ai-tools/tree/main/src/skills/chrome-debugger
Command: npx skills add https://github.com/jeff-hamm/ai-tools --skill chrome-debugger

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Attaches Chrome DevTools MCP to a running client-side app to enable interactive debugging of the frontend, including inspecting UI, network activity, and console output.

Core Features & Use Cases

  • Automatically determine app URL and attach DevTools
  • Start/verify dev server if needed
  • Open or reuse a Chrome tab, take initial screenshots and DOM snapshot

Quick Start

Tell me the app URL (or confirm the known project pattern) so the skill can attach Chrome DevTools and begin debugging.

Frequently Asked Questions about chrome-debugger

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

FAQPage Schema
How do I attach Chrome DevTools to a running frontend app for interactive debugging?▼

To attach Chrome DevTools for frontend debugging, the skill identifies your app URL via launch configurations, verifies the dev server, and coordinates tab management to enable inspecting UI, network activity, and console output.

Can I debug a client-side web app automatically without manually finding the port?▼

Yes, you can debug a client-side web app automatically by detecting the app URL through known project patterns or VS Code launch configurations, allowing the DevTools MCP to attach without manual port entry.

What do I need to start frontend web debugging with Chrome DevTools MCP?▼

To start frontend web debugging, you need a running client-side app and the Chrome DevTools MCP integration available. You provide the app URL or confirm the known project pattern to initiate the attachment.

Does Chrome DevTools MCP work with VS Code tasks and common dev servers?▼

Yes, Chrome DevTools MCP works with VS Code tasks and common dev servers by detecting launch configurations, verifying server status, and opening or reusing a Chrome tab to begin interactive frontend debugging.

What is the best way to inspect UI and network activity during frontend debugging?▼

The best way to inspect UI and network activity is by attaching Chrome DevTools MCP to your running app, which takes initial screenshots and DOM snapshots to enable interactive frontend debugging across modern stacks.

Why does my frontend debugging session need a running dev server before attaching DevTools?▼

Your frontend debugging session needs a running dev server to provide the live client-side app URL required for attachment. The skill checks server status and starts it if needed before connecting DevTools.

Related Skills

Explore More Software Engineering Skills→
OpenCovenOpenCoven
20

next-devtools

Connect to a running Next.js 16+ dev server to inspect routes, server actions, and logs.

Official
Intermediate
AskTinNguyenAskTinNguyen

browser-testing-with-devtools

Inspect live pages, DOM, console logs, and network activity via Chrome DevTools MCP.

Community
Advanced
olehsvyrydovolehsvyrydov
13

frontend-developer

Implement scalable React, Next.js, and React Native frontends with TypeScript and TailwindCSS.

Community
Intermediate
githubgithub
37.6k

chrome-devtools

Automate browser control and debugging via the Chrome DevTools MCP.

Official
Advanced