This course focuses on building practical, reusable debugging tools for Babylon.js projects. Instead of relying on console.log, you’ll create small, focused systems that help you inspect state, tune parameters, and understand what your game is doing frame by frame.

What you’ll build

On-screen debug overlay with Babylon GUI

• A fullscreen AdvancedDynamicTexture with simple stacked labels
• A LogStack that updates values each frame without holding object references
• Keyboard toggles to show/hide logs and switch focus between entities
• Basic patterns for adding per-entity debug output in systems

Adjustable components with dat.GUI

• A world-level dat.GUI panel that discovers entities and components
• Auto-generated controls for booleans, numbers (with sensible ranges), strings, vectors, and colors
• Folder organization by entity and component type
• A simple toggle to show/hide the GUI at runtime

Babylon Inspector basics and useful extensions

• Embedding the Inspector in a fixed container so it stays out of the way
• Toggling the debug layer with a keypress
• Adding custom panels for performance (FPS, draw calls, active meshes)
• Optional ECS and camera panels (entity list, component names, camera switching and speed/FOV controls)
• Lightweight CSS injection to keep custom panels readable

Time control system

• A small system that intercepts deltaTime before other systems run
• Pause/resume, single-frame stepping, and time scaling
• A compact overlay that shows actual vs modified delta and effective FPS
• Integration points in a typical World.updateSystems loop
• Safe clamping and optional helpers for slow-motion effects

World-attached GUIs

• A component for configuring world-space UI (dimensions, offsets, content)
• A factory for common GUI elements (labels, buttons, inputs, panels, images)
• Projecting world positions to screen space and hiding UI when off-screen/behind the camera
• Simple event dispatch so entities can react to button clicks
• Basic performance considerations: distance culling and limiting visible GUIs

The browser’s source debugger

• A quick workflow for breakpoints, stepping, watch expressions, and pausing on exceptions
• When to reach for the debugger vs the in-game tools you’ve built

Prerequisites

• Comfortable with TypeScript/JavaScript basics
• Some familiarity with Babylon.js (scenes, meshes, cameras) is helpful

Our Goals

• You’ll have a small set of debugging systems you can drop into new projects
• You’ll be able to inspect state without spamming the console or leaking memory
• You’ll know when to use GUI overlays, the Inspector, time control, and the browser debugger
• You’ll have patterns for organizing and extending these tools as your project grows