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

Then import and instantiante 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 will then provide the below information :

• Amount of objects currently active in the current scene
• Amount of draws operation
• Amount of body shape (requires to enable the hitbox checkbox)
• Amount of bounding box
• Amount of sprites objects
• Amount of objects currently inactive in the the object pool
• Heap/memory usage
• Frame update time (in ms)
• Frame draw time (in ms)
• Current fps rate vs target fps

Note: Heap information requires starting Chrome with --enable-precise-memory-info

Additionally, using the checkbox 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 :

• Forums: with melonJS 2 we moved to a new discourse forum, but we can still also find the previous one here
• Chat: come and chat with us on discord
• we tried to keep our wikipage up-to-date with useful links, tutorials, and anything related melonJS.