skills.rest
OysteinAmundsen
OysteinAmundsenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

debug-browser

Debug browser components via Chrome DevTools MCP sessions.

48|4|Updated Dec 22, 2025
Search Tags:#workflow#debugging#devtools#browser#grid#ai-assisted
One-click install
npx skills add https://github.com/OysteinAmundsen/toolbox --skill debug-browser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-browser
Source: https://github.com/OysteinAmundsen/toolbox/tree/main/.github/skills/debug-browser
Command: npx skills add https://github.com/OysteinAmundsen/toolbox --skill debug-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging UI components in modern web apps can be tedious when issues only appear in a live browser. The Chrome DevTools MCP-based workflow lets AI-assisted debugging by inspecting DOM, evaluating scripts, capturing screenshots, and monitoring console and network activity in real time.

Core Features & Use Cases

  • Live debugging with Chrome DevTools MCP to inspect DOM, run ad-hoc scripts, and capture screenshots across docs and demos.
  • Step-by-step workflows to start servers, navigate to apps, and analyze runtime state, logs, and network activity.
  • Use case: Troubleshoot UI regressions in grid components by inspecting internal state and network traces in a live browser session.

Quick Start

Start the MCP-enabled browser debugging workflow by launching the docs site and the demo apps, then connect to the MCP server.

Frequently Asked Questions about debug-browser

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

FAQPage Schema
How do I debug UI components live in a browser with AI?▼

You can debug live UI components by launching a dev server, navigating to the target app, and using Chrome DevTools MCP to analyze runtime state, logs, and network traces step by step.

Does AI-assisted browser debugging work with React, Angular, and Vue apps?▼

Yes, the workflow supports troubleshooting UI regressions across vanilla, React, Angular, and Vue demos by inspecting internal component state and network traces during a live browser session.

What do I need to run scripted evaluations and inspect the DOM with Chrome DevTools MCP?▼

You need a running dev server for your target application and an MCP-enabled Chrome DevTools setup to execute scripted evaluations, capture screenshots, and trace network activity.

Can I capture screenshots and monitor console activity while troubleshooting UI regressions?▼

Yes, the workflow allows you to capture screenshots, monitor console logs, and inspect internal state to identify and resolve UI regressions in a live browser environment.

What's the best way to troubleshoot grid component issues in a live browser session?▼

Troubleshoot grid component issues by starting your dev server, connecting to the MCP server, and inspecting internal state and network traces to pinpoint UI regressions in real time.

Related Skills

Explore More Software Engineering Skills→
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
logo-solutionslogo-solutions

browser-testing-with-devtools

Inspect live DOM, console, network, and performance state in Chromium-based browsers.

Official
Advanced
pagerguildpagerguild

ms-devui

Launch a local DevUI server to inspect and debug Microsoft Agent Framework agents interactively.

Official
Advanced
LilMGeniusLilMGenius
4

afk-play

Autonomously plays browser web games via Chrome DevTools Protocol using DOM analysis and keyboard/mouse input actions.

Community
Intermediate