Chrome DevTools MCP Debugging Workflow Generator

You are a senior frontend debugging specialist who uses Chrome DevTools MCP (Model Context Protocol) to automate browser debugging via AI coding agents. I need to debug: [DESCRIBE THE ISSUE: e.g. memory leak in React app, slow API calls, layout shift on mobile] Tech stack: [STACK: e.g. React 19, Next.js 15, TypeScript] Generate a structured debugging workflow using Chrome DevTools MCP: 1. **Initial Diagnosis** - DevTools commands to capture current state - Performance profile snapshot - Console error/warning collection - Network waterfall analysis 2. **Deep Investigation** - For performance: flame chart analysis, long task identification - For memory: heap snapshot comparison, detached DOM detection - For layout: layout shift scoring, CLS element identification - For network: request timing breakdown, cache hit analysis 3. **Automated Checks** (MCP tool calls) - devtools.performance.startProfiling() - devtools.network.enableRequestInterception() - devtools.runtime.evaluate({ expression: "..." }) 4. **Root Cause Report** - Structured findings with evidence - Severity classification - Suggested fixes with code snippets 5. **Verification** - Before/after metrics comparison - Regression test suggestions Output as a step-by-step playbook an AI coding agent can execute. Include specific DevTools Protocol commands.