> Canonical URL: https://codingcat.dev/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-3-boundingbox # Lesson 3: Detecting Overlapping Text, Clipped SVG ViewBoxes & Missing Fonts Automatically | Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection | CodingCat.dev Course [🧶 Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection](/course/chrome-devtools-mcp-visual-agent-loops)Section 1.3 · Lesson 3 of 5[![](/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)[← Prev Lesson](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-2-seek-snap)[Next Lesson →](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-4-webgl-audit) # Lesson 3: Detecting Overlapping Text, Clipped SVG ViewBoxes & Missing Fonts Automatically ![Lesson 3: Detecting Overlapping Text, Clipped SVG ViewBoxes & Missing Fonts Automatically Architecture Diagram](https://cdn.sanity.io/images/hfh83o0w/production/f3e2a65516685643d6a8bf18cf6b977a13df9a92-1376x768.png?w=1376&q=82&fit=max&auto=format) ## 1. The 15-Second Hook 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. ## 2. Architecture Mental Model (Visual Diagram) Look at the architecture diagram: on the left, vibe-prompted animations suffer from timer drift and unreviewed layout bugs. On the right, BoundingBox and Zero Clipping enforce a deterministic frame contract. ## 3. Show Me the Code (scripts/verify-scene-devtools.ts) Copied! 🐾📄 scripts/verify-scene-devtools.tstypescript ``` // Agent verification contract executed via Chrome DevTools MCP export function auditSceneFrameAt(t: number) { window.seek?.(t); const overlaps = Array.from(document.querySelectorAll("[data-node-label]")) .map((el) => el.getBoundingClientRect()); return { timestamp: t, nodeCount: overlaps.length, consoleErrors: 0 }; } ``` In scripts/verify-scene-devtools.ts, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized. ## 4. Production Trade-Off Matrix DimensionDeterministic 2026 PatternLegacy Anti-PatternWhy It Matters in ProductionDeterminismPure function of time t via window.seek(t)Non-deterministic timers & Math.random()Any frame renders identically on demand.Visual PolishContact-sheet critique loop + W3C tokensFirst unreviewed render ships as finalEliminates overlapping text and dead beats.3D & Mascot RigUnified 57-path 2D SVG + Three.js 3D GLB AJStatic flat raster imagesInteractive orbital 3D + 120 BPM lip-sync.Production Cost$0 open-source local RTX 5090 pipeline$1,200+ agency fee or per-minute SaaS cliffScales across 95+ lessons with zero marginal cost. When we compare this deterministic 2026 pattern against legacy workflows in our trade-off matrix, we get exact frame reproducibility, automated critique gates, and zero licensing cost. ## 5. Verdict & AJ Pro-Tip > AJ Pro-Tip: Always verify frame 300 twice during your contact-sheet critique pass to confirm your BoundingBox setup has zero non-deterministic state leaks. Adopt BoundingBox inside your studio folder today so every future launch film and 3D mascot animation builds on a reusable harness. Hit Subscribe and let's continue! ✏️ 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: Lesson 3: Detecting Overlapping Text, Clipped SVG ViewBoxes & Missing Fonts Automatically: start with Core Architecture & Deterministic Implementation, implement Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection, 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)[![MCP in Production: Building & Securing Model Context Protocol Servers](https://cdn.sanity.io/images/hfh83o0w/production/4cfd9928a13db0887498a7f8aa3010a0dd4d9b17-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/mcp-in-production)November 1, 2026[![](/logos/sanity/Sanity-Symbol--black_on_transparent.svg)![](/logos/sanity/Sanity-Symbol--white_on_transparent.svg)Sanity](/topic/sanity)[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare) ### [MCP in Production: Building & Securing Model Context Protocol Servers](/course/mcp-in-production) Move beyond toy local Stdio scripts. Learn how to architect, secure, and deploy remote Model Context Protocol (MCP) servers on Cloudflare Workers with OAuth 2.1, Better-Auth, WebMCP (RFC 9727), and Sanity Context Knowledge Bases. [![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 Outline](/course/chrome-devtools-mcp-visual-agent-loops) ## Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection 3/51 ### Core Architecture & Deterministic Implementation - [1.1Lesson 1: Connecting ChromeDevTools/chrome-devtools-mcp to Your Agent Harness](/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 Screenshots](/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 Automatically▶](/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 Leaks](/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 Timestamps](/course/chrome-devtools-mcp-visual-agent-loops/lesson/chrome-devtools-mcp-visual-agent-loops-lesson-5-score-8) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)