$ [sudo] npm install @melonjs/debug-plugin

Then import and instantiate the debug plugin in your project. For example:

import { utils, plugin } from 'melonjs';

// dynamically import the plugin
import("@melonjs/debug-plugin").then((debugPlugin) => {
    // automatically register the debug panel
    utils.function.defer(plugin.register, this, debugPlugin.DebugPanelPlugin, "debugPanel");
});

The Debug Panel is hidden by default and can be displayed using the S key. It provides a compact HUD overlay with real-time engine diagnostics:

The panel displays the following information across three rows:

• #objects — number of objects currently active in the scene
• #draws — number of draw operations per frame
• hitbox / velocity / quadtree — toggle checkboxes for debug overlays
• Update / Draw — frame update and draw time in milliseconds, averaged over the last 30 frames (performance.now() is clamped to 100µs in a page that is not cross-origin isolated, so a single frame's reading cannot resolve the printed decimals)
• Heap — JS heap memory usage (used/total in MB, Chrome only)
• Pool — number of objects currently in the object pool
• FPS — current vs target frame rate
• Shapes / Sprites / Velocity / Bounds / Children — per-frame counters for active engine objects

Below the stats, two sparkline graphs show:

• Frame time graph — stacked update (cyan) and draw (amber) times with a target frame time indicator
• Memory graph — JS heap usage over time (Chrome only)

Note: Heap memory information is only available in Chromium-based browsers (Chrome, Edge, Opera) via the performance.memory API, which is deprecated but has no real-time alternative yet.

Additionally, using the checkboxes in the panel it is also possible to draw:

• Shape and bounding box for all objects
• Current velocity vector
• Quadtree spatial visualization

If you need technical support, you can contact us through the following channels :

• Chat: come and chat with us on discord
• Wiki with useful links, tutorials, and anything related to melonJS