Skills
.Work. You
Rest

debug-browser

Community

Debug components live in a browser with AI help.

Software Engineering#workflow#debugging#devtools#browser#grid#ai-assisted
AuthorOysteinAmundsen
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: debug-browser
Download link: https://github.com/OysteinAmundsen/toolbox/archive/main.zip#debug-browser

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.