Lilly Tech Systems
Claude Code CLI with Chrome DevTools
Connect Claude Code to your Chrome browser through the DevTools MCP server. Take screenshots, click elements, run JavaScript, analyze performance, monitor network traffic, and run Lighthouse audits — all through natural language commands in your terminal.
What You'll Learn
By the end of this course, you'll use Claude Code as an AI-powered browser inspector that can debug, analyze, and optimize web applications.
Visual Debugging
Take screenshots, inspect DOM elements, click buttons, and fill forms — all through Claude Code commands.
Performance Analysis
Run performance traces, Lighthouse audits, and memory snapshots to identify bottlenecks and optimization opportunities.
Network Monitoring
Monitor network requests, inspect API responses, debug failed requests, and analyze performance timing.
JavaScript Execution
Run JavaScript in the page context, read console messages, evaluate page state, and manipulate the DOM live.
Course Lessons
Follow the lessons in order or jump to any topic you need.
1. Introduction
What is Chrome DevTools MCP? Connecting Claude Code to Chrome. Available tools and capabilities overview.
2. Setup
Install the MCP server, configure Claude Code, launch Chrome with debugging port, and run your first interaction.
3. Debugging
DOM inspection, JavaScript execution, console reading, element interaction, screenshot debugging, and live workflows.
4. Performance
Performance tracing, Lighthouse audits, memory snapshots, bottleneck identification, and optimization tips.
5. Network Analysis
Network monitoring, request inspection, API debugging, timing analysis, caching, and error detection.
6. Best Practices
Effective browser debugging with AI, workflow optimization, security, dynamic pages, and common pitfalls.
Prerequisites
What you need before starting this course.
- Claude Code CLI installed and authenticated
- Google Chrome browser installed
- Basic familiarity with browser DevTools concepts
- A web application to debug (local or remote)