node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »


Pocket sized debug module for Phaser. Displays FPS graph, WEBGL drawcalls in any DOM (text) element. Demo


Displays FPS, MS graphs and drawcalls (WEBGL) in HTML DOM elements. Based upon pocketplot, a simple plotting program.

A graph is text only and consists of scanlines:

   _________*_*_____________*____ scanLine 0 (32 bit number)
   _______*_____*_________*______ scanLine 1
   _____*_________*__*_*_________ etc....
   _*_*__________________________ ....
   ______________________________ ..


  • Phaser v2 (tested in 2.6.2 and 2.8.4)
  • Phaser.WEBGL mode for draw counts


pocketdebug =game.plugins.add(Phaser.Plugin.PocketDebug);
pocketdebug =game.plugins.add(Phaser.Plugin.PocketDebug,x,y,scale,advanced,bitmode);
//arguments : 
//  x,y             : position of panels relative to top-left corner of game
//  scale           : font-size and width of panel element multiplied by this scalevalue(default 1)
//  advanced        : adds an extra panel to measure state,stage,plugins,tweens,sound,input,physics,particles update time (in microseconds. 1 us=0.001ms).
//  bitmode         : do not reformat scanline, will output 0's and 1's, for retro feel and less overhead.
  • UI:

  • -- : hide/show graphs.

  • + : zoom in Y range.

  • - : zoom out & range.

  • -> : cycle trough graphs.

  • >> : increase refresh rate, resets after 10 clicks.

  • click on A graph to change the color for better color contrast.

Dev notes

the src folder contains a commented version. Ideas, contributions, optimizations, suggestions are very welcome. All changes are found in the Changelog; The source code for the wrapper function is from phaser-debug by englercj :