> Canonical URL: https://codingcat.dev/course/chrome-devtools-mcp-visual-agent-loops # Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection | CodingCat.dev Course 🧶 CodingCat.dev Course5 Lessons[![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native](/topic/react-native)[![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js](/topic/threejs)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)[![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP](/topic/mcp)[![](/logos/tags/chrome-symbol-light.svg)![](/logos/tags/chrome-symbol-dark.svg)Chrome](/topic/chrome)[![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video](/topic/video)[â–¶ Watch Course Playlist on YouTube ↗](https://www.youtube.com/@codingcatdev/playlists?sub_confirmation=1)[Start Course →](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-1-devtools-mcp) # Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection ![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/b144a4ce077ac03d081ed66396a7cffebbcdb24f-1376x768.png?w=1376&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson) ## 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. 1 ### Core Architecture & Deterministic Implementation - [1.1Lesson 1: Connecting ChromeDevTools/chrome-devtools-mcp to Your Agent HarnessWelcome 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.![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP![](/logos/tags/chrome-symbol-light.svg)![](/logos/tags/chrome-symbol-dark.svg)Chrome![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-1-devtools-mcp) - [1.2Lesson 2: Stepping Through `window.seek(t)` Timestamps & Capturing Frame ScreenshotsWelcome 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.![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP![](/logos/tags/chrome-symbol-light.svg)![](/logos/tags/chrome-symbol-dark.svg)Chrome![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-2-seek-snap) - [1.3Lesson 3: Detecting Overlapping Text, Clipped SVG ViewBoxes & Missing Fonts AutomaticallyWelcome 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.![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP![](/logos/tags/chrome-symbol-light.svg)![](/logos/tags/chrome-symbol-dark.svg)Chrome![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-3-boundingbox) - [1.4Lesson 4: Auditing Three.js WebGL Draw Calls, Shader Warnings & Memory LeaksWelcome 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.![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP![](/logos/tags/chrome-symbol-light.svg)![](/logos/tags/chrome-symbol-dark.svg)Chrome+1đź“– Written LessonStart Lesson →](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-4-webgl-audit) - [1.5Lesson 5: The Critic Loop: Scoring 1-10 & Auto-Patching the 3 Worst TimestampsWelcome 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.![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP![](/logos/tags/chrome-symbol-light.svg)![](/logos/tags/chrome-symbol-dark.svg)Chrome![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-5-score-8) ✏️ Visual Architecture Diagram ## how this course connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Chrome DevTools MCP: Self-Healing Agent Visual &…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection: start with Core Architecture & Deterministic Implementation, implement Hands-On Implementation, and ship to production.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](https://cdn.sanity.io/images/hfh83o0w/production/b155eb490d8cc1576c7332ce9294f612cbc917aa-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai) ### [Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp) Build framework-agnostic HTML-to-video pipelines for AI agents. Combine HyperFrames, paused GSAP timelines, Impeccable design linting, and Chrome DevTools MCP self-healing visual inspection. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Flagship 2: Agentic 3D Web Pipelines with Blender, Blender MCP & Three.js](https://cdn.sanity.io/images/hfh83o0w/production/723908b7c80537de52a122c1816a6b94163f466b-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/agentic-3d-web-pipelines-blender-mcp-threejs)November 4, 2026[![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native](/topic/react-native)[![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js](/topic/threejs) ### [Flagship 2: Agentic 3D Web Pipelines with Blender, Blender MCP & Three.js](/course/agentic-3d-web-pipelines-blender-mcp-threejs) Go behind the scenes of how we built 3D AJ the Cat on CodingCat.dev. Connect AI agents to Blender via Blender MCP, export compact glTF 2.0 (.glb) armatures, and render them in Three.js with deterministic window.seek(t) physics. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)