Browser Runtime Debugging Toolkit

Overview

UI/CSS/DOM layout issues often have root causes that only manifest at runtime — dynamically generated DOM structures, CSS specificity conflicts, layout calculation anomalies. Static code analysis (Read/Grep) and console-based debugging (console.log) have a fundamental limitation: they cannot observe the rendered DOM tree, computed CSS properties, or box model geometry.

This skill provides a scene-to-tool decision table and usage guides for each tool. Referenced by PDCA hosts via frontmatter dependencies (invoked after a prerequisite check when browser-reproducible scenarios are detected). Hosts are SoT for that edge.

Prerequisites

Step 1: Check MCP Availability

Before using browser debugging tools, check if chrome-devtools-mcp (sometimes called chrome-devtools-connect) is available: