From ae91df251e365adcca511358917e0dbc17e597e3 Mon Sep 17 00:00:00 2001 From: Brian 'bdougie' Douglas Date: Fri, 3 Oct 2025 05:29:05 -0700 Subject: [PATCH 1/5] docs: add Chrome DevTools Performance Cookbook guide - Add chrome-devtools-mcp-performance to docs navigation - Include Chrome DevTools guide in overview with description - Reorganize cookbook order in overview for better flow Generated with [Continue](https://continue.dev) Co-Authored-By: Continue --- docs/docs.json | 3 ++- docs/guides/overview.mdx | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/docs.json b/docs/docs.json index 94be18094b6..4cd4c35718d 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -262,7 +262,8 @@ "guides/posthog-github-continuous-ai", "guides/snyk-mcp-continue-cookbook", "guides/dlt-mcp-continue-cookbook", - "guides/netlify-mcp-continuous-deployment" + "guides/netlify-mcp-continuous-deployment", + "guides/chrome-devtools-mcp-performance" ] } ] diff --git a/docs/guides/overview.mdx b/docs/guides/overview.mdx index 3ca80dae016..5fcec59b171 100644 --- a/docs/guides/overview.mdx +++ b/docs/guides/overview.mdx @@ -21,7 +21,9 @@ Step-by-step guides for integrating Model Context Protocol (MCP) servers with Co - [PostHog Session Analysis Cookbook](/guides/posthog-github-continuous-ai) - Analyze user behavior data to optimize your codebase with automatic issue creation - [Netlify Performance Optimization Cookbook](/guides/netlify-mcp-continuous-deployment) - Optimize web performance with A/B testing and automated monitoring using Netlify MCP +- [Chrome DevTools Performance Cookbook](/guides/chrome-devtools-mcp-performance) - Measure and optimize web performance with automated traces, Core Web Vitals monitoring, and performance budgets - [Snyk + Continue Hub Agent Cookbook (MCP)](/guides/snyk-mcp-continue-cookbook) - Integrate Snyk MCP via Continue Hub to scan code, deps, IaC, and containers +- [dlt + Continue Hub Agent Cookbook (MCP)](/guides/dlt-mcp-continue-cookbook) - Build data pipelines with natural language using dlt MCP integration ## What Advanced Tutorials Are Available From 5c803d880d06dee0474f1d85bb90da7374b0fb44 Mon Sep 17 00:00:00 2001 From: Brian 'bdougie' Douglas Date: Fri, 3 Oct 2025 05:32:07 -0700 Subject: [PATCH 2/5] docs: improve formatting in Chrome DevTools Performance guide - Convert 'What You've Built' section to proper list format with bullets - Add left alignment to Performance Issue Quick Reference table - Enhance readability with bold formatting for key phrases Generated with [Continue](https://continue.dev) Co-Authored-By: Continue --- .../chrome-devtools-mcp-performance.mdx | 791 ++++++++++++++++++ 1 file changed, 791 insertions(+) create mode 100644 docs/guides/chrome-devtools-mcp-performance.mdx diff --git a/docs/guides/chrome-devtools-mcp-performance.mdx b/docs/guides/chrome-devtools-mcp-performance.mdx new file mode 100644 index 00000000000..e3e1c6cfdad --- /dev/null +++ b/docs/guides/chrome-devtools-mcp-performance.mdx @@ -0,0 +1,791 @@ +--- +title: "Chrome DevTools Performance Optimization Cookbook" +description: "Measure and optimize web performance with Chrome DevTools MCP, automated performance traces, and Core Web Vitals monitoring using Continue." +sidebarTitle: "Chrome DevTools MCP for Performance" +--- + + + 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](https://developer.chrome.com/docs/devtools/performance) with automated analysis + - [Network Request Monitoring](https://developer.chrome.com/docs/devtools/network) for bottleneck detection + - [Console Debugging](https://developer.chrome.com/docs/devtools/console) with error pattern recognition + - [CPU & Network Throttling](https://developer.chrome.com/docs/devtools/performance/reference#throttling) to simulate real-world conditions + - [Performance Insights](https://developer.chrome.com/docs/devtools/performance-insights) with AI-powered analysis + - [Screenshot Debugging](https://developer.chrome.com/docs/devtools/device-mode) for visual regression detection + +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](https://developer.chrome.com/docs/devtools/performance) to capture runtime metrics +- Analyze [Core Web Vitals](https://web.dev/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](https://developer.chrome.com/docs/devtools/performance/reference#throttling) +- Automate visual regression testing with [screenshots](https://developer.chrome.com/docs/devtools/device-mode) + +## Prerequisites + +- Chrome browser installed +- Web project with a running development server (or deployed URL) +- Node.js 18+ installed +- [Continue CLI](https://docs.continue.dev/guides/cli) (`npm i -g @continuedev/cli`) +- [Chrome DevTools MCP](https://hub.continue.dev) configured + +## Quick Setup + +For all options, first: + + + ```bash + npm i -g @continuedev/cli + ``` + + + +## Chrome DevTools MCP Workflow Options + + + Use the Chrome DevTools MCP to automatically launch Chrome, connect to DevTools, and analyze performance - all through natural language prompts in Continue CLI. + + +After completing **Quick Setup** above, you have two paths to get started: + + + + + + Add the Chrome DevTools MCP to your Continue configuration (`~/.continue/config.json`): + + ```json + { + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": ["chrome-devtools-mcp@latest"] + } + } + } + ``` + + The MCP will automatically launch Chrome and connect to DevTools when needed. + + + + Test the connection: + + **TUI Mode Prompt:** + ``` + Open web.dev and take a screenshot + ``` + + + + Navigate to your project directory: + + **TUI Mode Prompt:** + ``` + Navigate to http://localhost:3000 and record a performance trace. Analyze LCP, FID, and CLS. + ``` + + That's it! The MCP handles Chrome automation automatically. + + + + + **Why Use Chrome DevTools MCP?** Results are more consistent and debugging is easier thanks to direct DevTools integration. The MCP automatically handles browser lifecycle, screenshot capture, and performance trace collection. + + + + + + + + 1. Open Chrome and navigate to your site + 2. Press F12 to open DevTools + 3. Go to the Performance tab + 4. Record traces manually + + + + Copy performance data and ask Continue: + + ```bash + cn + # Then in TUI mode: + "Analyze this performance trace data: [paste data]" + ``` + + + + + **Manual Workflow**: While you can analyze performance manually, the Chrome DevTools MCP automates the entire workflow and provides programmatic access to all DevTools features through natural language. + + + + + + To use the Chrome DevTools MCP, you need: + - **Chrome browser** installed on your system + - **Continue CLI** with your own API keys or Continue CLI Pro Plan + - **Node.js 18+** to run the MCP via npx + + The MCP automatically launches Chrome in debugging mode and connects to DevTools programmatically. + + +--- + +## Performance Measurement Workflows + +The Chrome DevTools MCP enables natural language performance analysis. Here are workflows adapted from real-world use cases: + +### Quick Performance Checks + + +**TUI Mode Prompt:** +``` +Verify in the browser that your change works as expected. +``` + + + +**TUI Mode Prompt:** +``` +A few images on localhost:8080 are not loading. What's happening? +``` + + + +**TUI Mode Prompt:** +``` +Why does submitting the form fail after entering an email address? +``` + + + +**TUI Mode Prompt:** +``` +The page on localhost:8080 looks strange and off. Check what's happening there. +``` + + + +**TUI Mode Prompt:** +``` +Localhost:8080 is loading slowly. Make it load faster. +``` + + + +**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](/guides/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: + +- `CONTINUE_API_KEY`: Your Continue API key from [hub.continue.dev/settings/api-keys](https://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: + +```yaml +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 auth login --api-key "$CONTINUE_API_KEY" + + cn -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" + + - 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 + +| 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 + + + Your performance workflow now operates at **[Level 2 Continuous AI](https://blog.continue.dev/what-is-continuous-ai-a-developers-guide/)** - AI handles routine performance analysis and debugging with human oversight through review and approval of changes. + + +## Chrome DevTools MCP Capabilities + + + + + **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 + + + + + + **Tools Available** + - `list_network_requests`: See all requests and sizes + - `get_network_request`: Inspect specific request details + - `emulate_network`: Test under various network conditions + + + + + + **Tools Available** + - `list_console_messages`: Get all console logs and errors + - `evaluate_script`: Run JavaScript in page context + - Automatic error pattern detection + + + + + + **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: + + + + - LCP < 2.5s (good) + - FID < 100ms (good) + - CLS < 0.1 (good) + - INP < 200ms (good) + + + + - Total page size < 1MB + - JavaScript < 300KB + - Time to Interactive < 3.8s + - First Contentful Paint < 1.8s + + + + - 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 + + + + Official Chrome DevTools MCP repository + + + Explore more MCP integrations + + + Complete Chrome DevTools documentation + + + Learn about Core Web Vitals + + From b968cdc7eadc31a3677d24ed71f00dbf15d7f617 Mon Sep 17 00:00:00 2001 From: Brian 'bdougie' Douglas Date: Fri, 3 Oct 2025 05:50:03 -0700 Subject: [PATCH 3/5] docs: update Chrome DevTools guide with Hub integration and fixes - Replace JSON config with proper YAML format following Continue Hub schema - Add pre-built agent workflow using continuedev/chrome-dev-continuous - Reference official Chrome DevTools MCP at hub.continue.dev/google/chrome-devtools-mcp - Fix Card icon rendering issue (rocket instead of zap with emoji) - Update Node.js prerequisite from 18+ to 20+ - Follow PostHog cookbook structure for consistency Generated with [Continue](https://continue.dev) Co-Authored-By: Continue --- .../chrome-devtools-mcp-performance.mdx | 105 ++++++++++-------- 1 file changed, 56 insertions(+), 49 deletions(-) diff --git a/docs/guides/chrome-devtools-mcp-performance.mdx b/docs/guides/chrome-devtools-mcp-performance.mdx index e3e1c6cfdad..ad4c22242ff 100644 --- a/docs/guides/chrome-devtools-mcp-performance.mdx +++ b/docs/guides/chrome-devtools-mcp-performance.mdx @@ -35,7 +35,7 @@ This cookbook teaches you to: - Chrome browser installed - Web project with a running development server (or deployed URL) -- Node.js 18+ installed +- Node.js 20+ installed - [Continue CLI](https://docs.continue.dev/guides/cli) (`npm i -g @continuedev/cli`) - [Chrome DevTools MCP](https://hub.continue.dev) configured @@ -52,27 +52,61 @@ For all options, first: ## Chrome DevTools MCP Workflow Options - - Use the Chrome DevTools MCP to automatically launch Chrome, connect to DevTools, and analyze performance - all through natural language prompts in Continue CLI. + + 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: + **Perfect for:** Immediate results with optimized prompts and built-in performance analysis + - - Add the Chrome DevTools MCP to your Continue configuration (`~/.continue/config.json`): - - ```json - { - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": ["chrome-devtools-mcp@latest"] - } - } - } + + Visit the [Chrome DevTools Continuous Agent](https://hub.continue.dev/continuedev/chrome-dev-continuous) on Continue Hub and click **"Install Agent"** or run: + + ```bash + cn --config continuedev/chrome-dev-continuous + ``` + + This agent includes: + - **Optimized prompts** for performance analysis and debugging + - **Built-in rules** for consistent formatting and error handling + - **[Chrome DevTools MCP](https://hub.continue.dev/google/chrome-devtools-mcp)** for reliable browser automation + + + + Navigate to your project directory and run: + ```bash + cn "Analyze performance of http://localhost:3000 and provide optimization recommendations" + ``` + + 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. + + + + + + + + Visit the [Chrome DevTools MCP](https://hub.continue.dev/google/chrome-devtools-mcp) on Continue Hub and add it to your assistant, or add this to your configuration: + + ```yaml + name: Chrome DevTools MCP + version: 0.0.1 + schema: v1 + mcpServers: + - name: Chrome DevTools MCP + command: npx + args: + - chrome-devtools-mcp@latest ``` The MCP will automatically launch Chrome and connect to DevTools when needed. @@ -94,50 +128,23 @@ After completing **Quick Setup** above, you have two paths to get started: ``` Navigate to http://localhost:3000 and record a performance trace. Analyze LCP, FID, and CLS. ``` - - That's it! The MCP handles Chrome automation automatically. - - - - - **Why Use Chrome DevTools MCP?** Results are more consistent and debugging is easier thanks to direct DevTools integration. The MCP automatically handles browser lifecycle, screenshot capture, and performance trace collection. - - - - - - - - 1. Open Chrome and navigate to your site - 2. Press F12 to open DevTools - 3. Go to the Performance tab - 4. Record traces manually - - - - Copy performance data and ask Continue: - - ```bash - cn - # Then in TUI mode: - "Analyze this performance trace data: [paste data]" - ``` - **Manual Workflow**: While you can analyze performance manually, the Chrome DevTools MCP automates the entire workflow and provides programmatic access to all DevTools features through natural language. + **Manual Setup**: While you can configure the MCP manually, the pre-built agent provides optimized prompts and better error handling for performance analysis workflows. - - To use the Chrome DevTools MCP, you need: + + 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 - - **Continue CLI** with your own API keys or Continue CLI Pro Plan - - **Node.js 18+** to run the MCP via npx + - **Node.js 20+** to run the MCP via npx - The MCP automatically launches Chrome in debugging mode and connects to DevTools programmatically. + The agent will automatically detect and use your configuration. --- From f7e51d8e5032f8ea5944d27d8918ded645b92ff5 Mon Sep 17 00:00:00 2001 From: Brian 'bdougie' Douglas Date: Fri, 3 Oct 2025 06:24:02 -0700 Subject: [PATCH 4/5] Fix Chrome DevTools guide to remove cn prefix in TUI step - Updated Step 2 in Quick Start to clarify users are already in TUI mode - Changed 'From your project directory, run: cn "..."' to 'In the TUI that opens, type: ...' - This matches the workflow where Step 1 runs 'cn --config' which opens TUI - Also updated wording in other guides from 'Navigate to' to 'From' for clarity Generated with [Continue](https://continue.dev) Co-Authored-By: Continue --- docs/guides/chrome-devtools-mcp-performance.mdx | 6 +++--- docs/guides/netlify-mcp-continuous-deployment.mdx | 2 +- docs/guides/posthog-github-continuous-ai.mdx | 2 +- docs/guides/snyk-mcp-continue-cookbook.mdx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/guides/chrome-devtools-mcp-performance.mdx b/docs/guides/chrome-devtools-mcp-performance.mdx index ad4c22242ff..2dd3d1e1129 100644 --- a/docs/guides/chrome-devtools-mcp-performance.mdx +++ b/docs/guides/chrome-devtools-mcp-performance.mdx @@ -78,9 +78,9 @@ After completing **Quick Setup** above, you have two paths to get started: - Navigate to your project directory and run: - ```bash - cn "Analyze performance of http://localhost:3000 and provide optimization recommendations" + In the TUI that opens, type: + ``` + Analyze performance of http://localhost:3000 and provide optimization recommendations ``` That's it! The agent handles Chrome automation automatically. diff --git a/docs/guides/netlify-mcp-continuous-deployment.mdx b/docs/guides/netlify-mcp-continuous-deployment.mdx index c852de1de2e..a6e53a6ef14 100644 --- a/docs/guides/netlify-mcp-continuous-deployment.mdx +++ b/docs/guides/netlify-mcp-continuous-deployment.mdx @@ -95,7 +95,7 @@ After completing **Quick Setup** above, you have two paths to get started: - Navigate to your project directory and run: + From your project directory, run: ```bash cn "Analyze my Netlify site's performance and optimize it for better Core Web Vitals." ``` diff --git a/docs/guides/posthog-github-continuous-ai.mdx b/docs/guides/posthog-github-continuous-ai.mdx index e74e798c5b9..ca8dfdafeab 100644 --- a/docs/guides/posthog-github-continuous-ai.mdx +++ b/docs/guides/posthog-github-continuous-ai.mdx @@ -146,7 +146,7 @@ You only need to configure the PostHog MCP credential - it automatically handles - Navigate to your project directory and run: + From your project directory, run: ```bash cn "Give me my PostHog Session data and create GitHub issues based on the problems." ``` diff --git a/docs/guides/snyk-mcp-continue-cookbook.mdx b/docs/guides/snyk-mcp-continue-cookbook.mdx index 5a1d3b3437b..5169374bace 100644 --- a/docs/guides/snyk-mcp-continue-cookbook.mdx +++ b/docs/guides/snyk-mcp-continue-cookbook.mdx @@ -74,7 +74,7 @@ After ensuring you meet the **Prerequisites** above, you have two paths to get s - Start with a comprehensive security scan: + From your project directory, start with a comprehensive security scan: ```bash # Headless mode cn -p "Run a complete security scan on this project including code vulnerabilities, dependencies, and any IaC files. Summarize findings by severity." --auto From 8fb6f02eb7722e6f57431f2105679e4fa7262ce4 Mon Sep 17 00:00:00 2001 From: Brian 'bdougie' Douglas Date: Fri, 3 Oct 2025 06:27:11 -0700 Subject: [PATCH 5/5] Fix Chrome DevTools GitHub Actions workflow to use cn --config - Removed invalid 'cn auth login' command - Updated to use 'cn --config continuedev/chrome-dev-continuous' like dlt cookbook - Added --auto flag for headless execution - Fixed line continuation formatting for better readability Generated with [Continue](https://continue.dev) Co-Authored-By: Continue --- docs/guides/chrome-devtools-mcp-performance.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/guides/chrome-devtools-mcp-performance.mdx b/docs/guides/chrome-devtools-mcp-performance.mdx index 2dd3d1e1129..02a24edd37f 100644 --- a/docs/guides/chrome-devtools-mcp-performance.mdx +++ b/docs/guides/chrome-devtools-mcp-performance.mdx @@ -438,13 +438,13 @@ jobs: env: CONTINUE_API_KEY: ${{ secrets.CONTINUE_API_KEY }} run: | - cn auth login --api-key "$CONTINUE_API_KEY" - - cn -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" + 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: |