Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection
Course Architecture Overview
Give your AI agent eyes inside the browser. Use Chrome DevTools MCP so your agent inspects its own rendered video frames, WebGL canvases, and DOM layouts before exporting.
Primary Open-Source Repository: github.com/ChromeDevTools/chrome-devtools-mcp
course lessons.
Core Architecture & Deterministic Implementation
- 1.1Lesson 1: Connecting ChromeDevTools/chrome-devtools-mcp to Your Agent Harness
Welcome to Lesson 1 of Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection on CodingCat.dev. Today we break down Connecting ChromeDevTools/chrome-devtools-mcp to Your Agent Harness and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
MCPChromeVideo📖 Written LessonStart Lesson → - 1.2Lesson 2: Stepping Through `window.seek(t)` Timestamps & Capturing Frame Screenshots
Welcome to Lesson 2 of Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection on CodingCat.dev. Today we break down Stepping Through `window.seek(t)` Timestamps & Capturing Frame Screenshots and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
MCPChromeVideo📖 Written LessonStart Lesson → - 1.3Lesson 3: Detecting Overlapping Text, Clipped SVG ViewBoxes & Missing Fonts Automatically
Welcome to Lesson 3 of Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection on CodingCat.dev. Today we break down Detecting Overlapping Text, Clipped SVG ViewBoxes & Missing Fonts Automatically and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
MCPChromeVideo📖 Written LessonStart Lesson → - 1.4Lesson 4: Auditing Three.js WebGL Draw Calls, Shader Warnings & Memory Leaks
Welcome to Lesson 4 of Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection on CodingCat.dev. Today we break down Auditing Three.js WebGL Draw Calls, Shader Warnings & Memory Leaks and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
Three.jsMCPChrome+1📖 Written LessonStart Lesson → - 1.5Lesson 5: The Critic Loop: Scoring 1-10 & Auto-Patching the 3 Worst Timestamps
Welcome to Lesson 5 of Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection on CodingCat.dev. Today we break down The Critic Loop: Scoring 1-10 & Auto-Patching the 3 Worst Timestamps and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
MCPChromeVideo📖 Written LessonStart Lesson →
how this course connects together.
Follow AJ from first principles to production-ready architecture.