Skip to main content

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:This guide shows you how to leverage these features through natural language with Continue CLI!

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

npm i -g @continuedev/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.
After completing Quick Setup above, you have two paths to get started:
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
The agent will automatically detect and use your configuration.

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:
Verify in the browser that your change works as expected.

Debug Broken Images

TUI Mode Prompt:
A few images on localhost:8080 are not loading. What's happening?

Debug Form Submission Issues

TUI Mode Prompt:
Why does submitting the form fail after entering an email address?

Debug Layout Issues

TUI Mode Prompt:
The page on localhost:8080 looks strange and off. Check what's happening there.

Performance Optimization

TUI Mode Prompt:
Localhost:8080 is loading slowly. Make it load faster.

Check Core Web Vitals

TUI Mode Prompt:
Please check the LCP of web.dev.

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
Test in Plan Mode First: Before running performance measurements, test your prompts in plan mode (see the Plan Mode Guide; press Shift+Tab to switch modes). This shows you what the agent will do without executing it.

Step 1: Baseline Performance Trace

Establish your current performance baseline: TUI Mode Prompt:
Navigate to http://localhost:3000 and record a performance trace with page reload. Analyze the trace and show me the LCP, FID, CLS, and total blocking time.
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:
Record a performance trace for http://localhost:3000 and analyze all Performance Insights. For each insight found, provide detailed information about:
- The specific issue (e.g., DocumentLatency, SlowCSS)
- Root cause analysis
- Affected resources or code
- Recommended optimizations
- Expected impact on Core Web Vitals
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:
Navigate to https://my-site.com and:
1. List all network requests made during page load
2. Identify the 5 slowest requests and their sizes
3. Find any requests over 1MB
4. Detect render-blocking resources
5. Check for inefficient caching (missing cache headers)
6. Suggest specific optimizations for each issue found

Step 4: Throttling Performance Tests

Test performance under real-world network and CPU conditions: TUI Mode Prompt:
Test my site's performance under different conditions:

1. Navigate to http://localhost:3000
2. Emulate 4x CPU slowdown and Fast 3G network
3. Record a performance trace with reload
4. Analyze LCP and Total Blocking Time
5. Take a screenshot when page is fully loaded

Then repeat the test with:
- Slow 3G network + 6x CPU slowdown
- Offline network (to test service worker)

Compare results and identify which conditions cause the worst performance degradation."
Available Network Presets:
  • No throttling
  • Fast 3G (1.6 Mbps down, 0.75 Mbps up)
  • Slow 3G (400 Kbps down, 400 Kbps up)
  • Offline
CPU Throttling: 4x, 6x, or custom slowdown to simulate low-end devices

Step 5: JavaScript Performance Analysis

Identify expensive JavaScript operations: TUI Mode Prompt:
Record a performance trace for http://localhost:3000 and:
1. Identify all long tasks (>50ms) blocking the main thread
2. Find the specific JavaScript functions causing these tasks
3. Measure total JavaScript execution time
4. Detect unused JavaScript being loaded
5. Show the call stack for the longest task
6. Recommend code splitting or lazy loading opportunities"

Automated Performance Monitoring

Step 6: Core Web Vitals Dashboard

Create automated monitoring for Core Web Vitals: TUI Mode Prompt:
Create a performance monitoring script that:
1. Opens my site at http://localhost:3000
2. Records a performance trace with reload
3. Extracts Core Web Vitals (LCP, FID, CLS, INP)
4. Checks console for JavaScript errors
5. Takes a screenshot
6. Saves results to performance-report.json with format:
   {
     'timestamp': 'ISO date',
     'lcp': number,
     'fid': number,
     'cls': number,
     'inp': number,
     'errors': array,
     'screenshot': 'path'
   }

Save this as scripts/performance-monitor.js that I can run regularly"

Step 7: Visual Regression Detection

Detect unintended visual changes: TUI Mode Prompt:
Set up visual regression testing:
1. Navigate to http://localhost:3000
2. Take full-page screenshots at:
   - Desktop viewport (1920x1080)
   - Tablet viewport (768x1024)
   - Mobile viewport (375x667)
3. Save screenshots to screenshots/baseline/
4. Create a script to compare future screenshots against baseline
5. Highlight any pixel differences over 5%
6. Generate a visual diff report"

Step 8: Performance Budget Enforcement

Set and enforce performance budgets: TUI Mode Prompt:
Create a performance budget checker that:

Requirements:
- LCP must be < 2.5 seconds
- FID must be < 100ms
- CLS must be < 0.1
- Total JavaScript < 300KB
- Total page size < 1MB
- No console errors

Implementation:
1. Navigate to http://localhost:3000
2. Record performance trace with reload
3. List all network requests and calculate total sizes
4. Check console messages for errors
5. Validate all metrics against budgets
6. Exit with code 1 if any budget is exceeded
7. Generate a detailed report showing pass/fail for each metric

Save as scripts/performance-budget.js for CI/CD integration"

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:

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:
name: Performance Check

on:
  pull_request:

jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install Dependencies
        run: |
          npm install -g @continuedev/cli
          npm ci

      - name: Build Project
        run: npm run build

      - name: Start Dev Server
        run: |
          npm run dev &
          npx wait-on http://localhost:3000

      - name: Run Performance Tests
        env:
          CONTINUE_API_KEY: ${{ secrets.CONTINUE_API_KEY }}
        run: |
          cn --config continuedev/chrome-dev-continuous \
             -p "Navigate to http://localhost:3000 and:
             1. Record performance trace with reload
             2. Extract LCP, FID, CLS values
             3. List network requests and calculate total bundle size
             4. Output results as JSON to performance.json" \
             --auto

      - name: Check Performance Budgets
        run: |
          node << 'EOF'
          const fs = require('fs');
          const perf = JSON.parse(fs.readFileSync('performance.json'));

          const budgets = {
            lcp: 2.5,
            fid: 100,
            cls: 0.1,
            bundleSize: 300000
          };

          let failed = false;
          const results = [];

          if (perf.lcp > budgets.lcp) {
            results.push(`❌ LCP: ${perf.lcp}s (budget: ${budgets.lcp}s)`);
            failed = true;
          } else {
            results.push(`✅ LCP: ${perf.lcp}s`);
          }

          if (perf.fid > budgets.fid) {
            results.push(`❌ FID: ${perf.fid}ms (budget: ${budgets.fid}ms)`);
            failed = true;
          } else {
            results.push(`✅ FID: ${perf.fid}ms`);
          }

          if (perf.cls > budgets.cls) {
            results.push(`❌ CLS: ${perf.cls} (budget: ${budgets.cls})`);
            failed = true;
          } else {
            results.push(`✅ CLS: ${perf.cls}`);
          }

          if (perf.bundleSize > budgets.bundleSize) {
            results.push(`❌ Bundle: ${perf.bundleSize}KB (budget: ${budgets.bundleSize}KB)`);
            failed = true;
          } else {
            results.push(`✅ Bundle: ${perf.bundleSize}KB`);
          }

          console.log(results.join('\n'));

          if (failed) {
            process.exit(1);
          }
          EOF

      - name: Comment Performance Results
        if: always()
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const perf = JSON.parse(fs.readFileSync('performance.json'));

            const comment = `## 📊 Performance Report

            | Metric | Value | Budget | Status |
            |--------|-------|--------|--------|
            | LCP | ${perf.lcp}s | 2.5s | ${perf.lcp <= 2.5 ? '✅' : '❌'} |
            | FID | ${perf.fid}ms | 100ms | ${perf.fid <= 100 ? '✅' : '❌'} |
            | CLS | ${perf.cls} | 0.1 | ${perf.cls <= 0.1 ? '✅' : '❌'} |
            | Bundle Size | ${perf.bundleSize}KB | 300KB | ${perf.bundleSize <= 300 ? '✅' : '❌'} |

            ${perf.lcp > 2.5 || perf.fid > 100 || perf.cls > 0.1 || perf.bundleSize > 300
              ? '⚠️ **Performance budgets exceeded. Please optimize before merging.**'
              : '✅ **All performance budgets met!**'}`;

            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: comment
            });
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:
Compare performance between my site and competitors:

Sites to test:
- http://localhost:3000 (my site)
- https://competitor1.com
- https://competitor2.com

For each site:
1. Navigate to homepage
2. Record performance trace with reload
3. Extract LCP, FID, CLS, Total Blocking Time
4. List network requests and calculate total page size
5. Count JavaScript and CSS files

Create a comparison table showing:
- Site name
- All Core Web Vitals
- Total page size
- Number of requests
- Which site performs best for each metric

Provide specific recommendations for how my site can improve based on what competitors do better."

Step 10: Performance Testing Across Routes

Test performance consistency across your entire site: TUI Mode Prompt:
Test performance across all major routes:

Routes to test:
- / (homepage)
- /products
- /products/[id] (pick a sample product)
- /checkout
- /blog

For each route:
1. Navigate to the URL
2. Record performance trace
3. Extract LCP, Total Blocking Time, bundle size
4. Check console for errors
5. Take a screenshot

Generate a report showing:
- Which routes have the worst LCP
- Routes with the most JavaScript errors
- Bundle size variations across routes
- Recommendations for route-specific optimizations"

Step 11: Mobile Performance Analysis

Focus on mobile-specific performance issues: TUI Mode Prompt:
Analyze mobile performance for http://localhost:3000:

1. Resize viewport to mobile (375x667)
2. Emulate Slow 3G network + 4x CPU slowdown
3. Record performance trace with reload
4. Analyze Performance Insights for mobile-specific issues
5. Check for:
   - Touch target sizes too small
   - Horizontal scrolling issues
   - Oversized images not optimized for mobile
   - Excessive JavaScript on mobile
6. Take mobile screenshot
7. Provide mobile-specific optimization recommendations"

Performance Troubleshooting

Debug Performance Regressions

Quickly identify what caused a performance regression: TUI Mode Prompt:
Debug performance regression on http://localhost:3000:

1. Record performance trace
2. Analyze all Performance Insights
3. List console errors and warnings
4. Check network requests for:
   - Failed requests
   - Slow requests (>1s)
   - Large requests (>500KB)
5. Identify the top 3 performance bottlenecks
6. For each bottleneck, suggest:
   - Root cause
   - Specific code or resource causing it
   - Step-by-step fix
   - Expected performance improvement"

Performance Issue Quick Reference

IssueQuick 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-reload
  • performance_stop_trace: Stop and analyze trace
  • performance_analyze_insight: Deep dive into specific issues

Network Debugging

Tools Available
  • list_network_requests: See all requests and sizes
  • get_network_request: Inspect specific request details
  • emulate_network: Test under various network conditions

Console Analysis

Tools Available
  • list_console_messages: Get all console logs and errors
  • evaluate_script: Run JavaScript in page context
  • Automatic error pattern detection

Visual Testing

Tools Available
  • take_screenshot: Capture full or partial page
  • take_snapshot: Get accessibility tree snapshot
  • resize_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:
Compare performance of two implementations:
1. Test variant A at http://localhost:3000?variant=A
2. Test variant B at http://localhost:3000?variant=B
Run each test 5 times and calculate average LCP, FID, CLS
Determine which variant has better performance and by how much

Lighthouse Score Tracking

TUI Mode Prompt:
Create a script that runs daily performance audits:
1. Navigate to production site
2. Record performance trace
3. Calculate Lighthouse-style performance score based on:
   - FCP (10%)
   - SI (10%)
   - LCP (25%)
   - TTI (10%)
   - TBT (30%)
   - CLS (15%)
4. Track score over time in performance-history.json
5. Alert if score drops below 90

Performance Regression Detection

TUI Mode Prompt:
Set up automated regression detection:
1. Record baseline performance for main branch
2. Save baseline metrics to baseline-perf.json
3. On each PR, run performance tests
4. Compare PR metrics with baseline
5. Flag regressions over 10% for any metric
6. Generate visual diff report with screenshots

Next Steps

  1. Analyze your first site - Try the baseline performance trace on your current project
  2. Debug bottlenecks - Use the network analysis prompt to fix slow requests
  3. Set up CI pipeline - Add the GitHub Actions workflow to your repo
  4. Test throttling - Measure performance under real-world network conditions
  5. Monitor trends - Track Core Web Vitals over time

Additional Resources

I