Debug Performance Like a Pro
Use AI to automatically trace performance, analyze Core Web Vitals, diagnose bottlenecks, and get actionable optimization suggestions directly from Chrome DevTools
Did You Know? Chrome DevTools MCP brings the full power of browser debugging to your AI workflow:
- Performance Traces with automated analysis
- Network Request Monitoring for bottleneck detection
- Console Debugging with error pattern recognition
- CPU & Network Throttling to simulate real-world conditions
- Performance Insights with AI-powered analysis
- Screenshot Debugging for visual regression detection
What You’ll Learn
This cookbook teaches you to:- Run automated performance traces to capture runtime metrics
- Analyze Core Web Vitals (LCP, FID, CLS, INP) and performance insights
- Diagnose performance bottlenecks using network and console analysis
- Test performance under different network and CPU conditions with throttling
- Automate visual regression testing with screenshots
Prerequisites
- Chrome browser installed
- Web project with a running development server (or deployed URL)
- Node.js 20+ installed
- Continue CLI (
npm i -g @continuedev/cli
) - Chrome DevTools MCP configured
Quick Setup
For all options, first:1
Install Continue CLI
Chrome DevTools MCP Workflow Options
Fastest Path to Success
Skip the manual setup and use our pre-built Chrome DevTools agent that includes
optimized prompts, rules, and the Chrome DevTools MCP for more consistent results.
- ⚡ Quick Start (Recommended)
- 🛠️ Manual Setup
Perfect for: Immediate results with optimized prompts and built-in performance analysis
1
Add the Pre-Built Agent
Visit the Chrome DevTools Continuous Agent on Continue Hub and click “Install Agent” or run:This agent includes:
- Optimized prompts for performance analysis and debugging
- Built-in rules for consistent formatting and error handling
- Chrome DevTools MCP for reliable browser automation
2
Run Performance Analysis
In the TUI that opens, type:That’s it! The agent handles Chrome automation automatically.
Why Use the Agent? Results are more consistent and debugging is easier thanks to the Chrome DevTools MCP integration and pre-tested prompts.
Agent Requirements
Agent Requirements
To use the pre-built agent, you need either:
- Continue CLI Pro Plan with the models add-on, OR
- Your own API keys added to Continue Hub secrets
- Chrome browser installed on your system
- Node.js 20+ to run the MCP via npx
Performance Measurement Workflows
The Chrome DevTools MCP enables natural language performance analysis. Here are workflows adapted from real-world use cases:Quick Performance Checks
Verify Code Changes
TUI Mode Prompt:
Debug Broken Images
TUI Mode Prompt:
Debug Form Submission Issues
TUI Mode Prompt:
Debug Layout Issues
TUI Mode Prompt:
Performance Optimization
TUI Mode Prompt:
Check Core Web Vitals
TUI Mode Prompt:
Performance Analysis Recipes
Now you can use natural language prompts to analyze web performance. The Continue agent automatically calls the appropriate Chrome DevTools MCP tools.Where to run these workflows:
- IDE Extensions: Use Continue in VS Code, JetBrains, or other supported IDEs
- Terminal (TUI mode): Run
cn
to enter interactive mode, then type your prompts - CLI (headless mode): Use
cn -p "your prompt"
for headless commands
Step 1: Baseline Performance Trace
Establish your current performance baseline: TUI Mode Prompt:Chrome DevTools Performance Panel automatically tracks:
- Core Web Vitals: LCP, FID, CLS, INP
- Loading Performance: DOMContentLoaded, Load events, First Paint
- Runtime Performance: JavaScript execution time, layout shifts, paint events
- Resource Usage: Memory consumption, CPU utilization
Step 2: Analyze Performance Insights
Deep dive into specific performance issues: TUI Mode Prompt:Performance Insights: Chrome DevTools automatically detects common performance issues like:
- Render Blocking Resources: CSS and JavaScript that delay first paint
- Layout Shifts: Elements that move during page load
- Long Tasks: JavaScript execution blocking the main thread
- Slow Network Requests: Resources taking too long to load
- Unused CSS/JavaScript: Dead code increasing bundle size
Step 3: Network Performance Analysis
Identify slow network requests and optimization opportunities: TUI Mode Prompt:Step 4: Throttling Performance Tests
Test performance under real-world network and CPU conditions: TUI Mode Prompt:Available Network Presets:
- No throttling
- Fast 3G (1.6 Mbps down, 0.75 Mbps up)
- Slow 3G (400 Kbps down, 400 Kbps up)
- Offline
Step 5: JavaScript Performance Analysis
Identify expensive JavaScript operations: TUI Mode Prompt:Automated Performance Monitoring
Step 6: Core Web Vitals Dashboard
Create automated monitoring for Core Web Vitals: TUI Mode Prompt:Step 7: Visual Regression Detection
Detect unintended visual changes: TUI Mode Prompt:Step 8: Performance Budget Enforcement
Set and enforce performance budgets: TUI Mode Prompt:Continuous Performance Testing with GitHub Actions
This example demonstrates a Continuous AI workflow where performance validation runs automatically in your CI/CD pipeline using Chrome DevTools MCP in headless mode.Add GitHub Secrets
Navigate to Repository Settings → Secrets and variables → Actions and add:CONTINUE_API_KEY
: Your Continue API key from hub.continue.dev/settings/api-keys
Create Workflow File
This workflow automatically validates web performance on pull requests using the Continue CLI in headless mode. It records performance traces, extracts Core Web Vitals, and posts a summary report as a PR comment. Create.github/workflows/performance-check.yml
in your repository:
The Chrome DevTools MCP works in headless Chrome environments. Make sure your CI environment has Chrome installed (it’s pre-installed on GitHub Actions ubuntu-latest runners).
Advanced Performance Workflows
Step 9: Competitor Comparison
Compare your site’s performance with competitors: TUI Mode Prompt:Step 10: Performance Testing Across Routes
Test performance consistency across your entire site: TUI Mode Prompt:Step 11: Mobile Performance Analysis
Focus on mobile-specific performance issues: TUI Mode Prompt:Performance Troubleshooting
Debug Performance Regressions
Quickly identify what caused a performance regression: TUI Mode Prompt:Performance Issue Quick Reference
Issue | Quick Fix Command (in cn TUI) |
---|---|
Slow LCP | "Find render-blocking resources and suggest preloading or deferring" |
High CLS | "Detect layout shifts and identify unsized images or dynamic content" |
Long Tasks | "Find JavaScript tasks over 50ms and suggest code splitting" |
Large Bundles | "List all JavaScript files, identify largest ones, suggest lazy loading" |
Slow Network | "Find requests over 500KB and suggest compression or optimization" |
Console Errors | "List all console errors and suggest fixes" |
What You’ve Built
After completing this guide, you have a complete AI-powered performance analysis system that:- ✅ Uses natural language — Simple prompts instead of complex DevTools commands
- ✅ Analyzes automatically — AI interprets performance traces and suggests fixes
- ✅ Runs continuously — Automated validation in CI/CD pipelines
- ✅ Ensures quality — Performance checks prevent regressions from shipping
Continuous AI
Your performance workflow now operates at Level 2 Continuous AI - AI handles routine performance analysis and debugging with human oversight through review and approval of changes.
Chrome DevTools MCP Capabilities
Performance Tracing
Tools Available
performance_start_trace
: Start recording with auto-reloadperformance_stop_trace
: Stop and analyze traceperformance_analyze_insight
: Deep dive into specific issues
Network Debugging
Tools Available
list_network_requests
: See all requests and sizesget_network_request
: Inspect specific request detailsemulate_network
: Test under various network conditions
Console Analysis
Tools Available
list_console_messages
: Get all console logs and errorsevaluate_script
: Run JavaScript in page context- Automatic error pattern detection
Visual Testing
Tools Available
take_screenshot
: Capture full or partial pagetake_snapshot
: Get accessibility tree snapshotresize_page
: Test responsive layouts
Performance Best Practices
Key metrics to monitor for optimal web performance:Core Web Vitals
- LCP < 2.5s (good)
- FID < 100ms (good)
- CLS < 0.1 (good)
- INP < 200ms (good)
Loading Performance
- Total page size < 1MB
- JavaScript < 300KB
- Time to Interactive < 3.8s
- First Contentful Paint < 1.8s
Runtime Performance
- No long tasks > 50ms
- 60 FPS during interactions
- No memory leaks
- Efficient event listeners
Advanced Testing Scenarios
A/B Test Performance Impact
TUI Mode Prompt:Lighthouse Score Tracking
TUI Mode Prompt:Performance Regression Detection
TUI Mode Prompt:Next Steps
- Analyze your first site - Try the baseline performance trace on your current project
- Debug bottlenecks - Use the network analysis prompt to fix slow requests
- Set up CI pipeline - Add the GitHub Actions workflow to your repo
- Test throttling - Measure performance under real-world network conditions
- Monitor trends - Track Core Web Vitals over time