TypeScript icon, indicating that this package has built-in type declarations

14.8.3 • Public • Published

melonJS Debug Plugin

melonJS Logo

License: MIT NPM Package jsDeliver


$ [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 : debug-panel

  • 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

Questions, need help ?

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.

Package Sidebar


npm i @melonjs/debug-plugin

Weekly Downloads






Unpacked Size

203 kB

Total Files


Last publish


  • melonjs