Chrome DevTools MCP 调试工作流生成器

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.