chrome-devtools-runtime-debugger

Debug browser runtime issues via Chrome DevTools MCP.

3|Updated Jun 8, 2026
One-click install
npx skills add https://github.com/pax-k/pax-fullstack-harness --skill chrome-devtools-runtime-debugger
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-devtools-runtime-debugger
Source: https://github.com/pax-k/pax-fullstack-harness/tree/main/skills/chrome-devtools-runtime-debugger
Command: npx skills add https://github.com/pax-k/pax-fullstack-harness --skill chrome-devtools-runtime-debugger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a structured approach to browser debugging using Chrome DevTools, helping to diagnose and resolve issues in web applications efficiently.

Core Features & Use Cases

  • Chrome DevTools Integration: Utilizes Chrome DevTools for console, network, DOM, accessibility, Lighthouse, performance, and responsive debugging.
  • Setup Guidance: Offers instructions for ensuring Chrome DevTools MCP is properly configured.
  • Diagnosis and Validation: Assists in starting local runtime, opening target URLs, inspecting errors, and capturing evidence.
  • Documentation and Linking: Guides the creation of documentation and linking findings to relevant follow-up checks.

Quick Start

Use the $chrome-devtools-runtime-debugger command to begin debugging browser runtime behavior with Chrome DevTools MCP guidance.

Frequently Asked Questions about chrome-devtools-runtime-debugger

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

FAQPage Schema
How do I debug web application runtime issues using Chrome DevTools?

You can debug web application runtime issues by using this Skill to guide Chrome DevTools for inspecting console errors, network failures, and DOM elements. It provides a structured approach to diagnose and resolve browser runtime behavior efficiently.

What is the best way to diagnose network failures and console errors in a local runtime environment?

Diagnosing network failures and console errors requires starting your local runtime and opening the target URL. This Skill facilitates capturing evidence and inspecting errors directly through Chrome DevTools integration to pinpoint runtime issues.

Do I need a specific Chrome DevTools MCP setup to inspect DOM and CSS during browser debugging?

Yes, a functioning Chrome DevTools MCP setup is required to inspect DOM and CSS. This Skill offers setup guidance to ensure your environment is properly configured before beginning the browser debugging process.

Can I use this approach to perform performance tracing and accessibility checks for my web application?

Yes, you can perform performance tracing and accessibility checks. This Skill utilizes Chrome DevTools to cover Lighthouse audits, performance tracing, and accessibility debugging alongside standard DOM and network inspections.

How do I document and link browser debugging findings to follow-up checks?

You document debugging findings by following this Skill's guidance on creating documentation and linking evidence to relevant follow-up checks. It ensures runtime issues captured during inspection are properly recorded for further validation.