Phaser 3 Debugger

Phaser 3 Debugger is a utility that aids developers in debugging games built using the Phaser JavaScript game engine. It provides the ability to display data about entities as they move around the screen, pause the game, slow down game time, and other things.

How do I get it?

You can install it with npm or download it directly from github.

npm install phaser3-debugger

Who should use this?

Anyone using Phaser 3 to build a game. Even just having the ability to pause a scene with the touch of a button is incredibly helpful. And when you configure it to display the coordinates and angles of your game objects in real time, or display any other custom property, you will see exactly how useful it can be.

Why did you build this?

As I've worked on my game, Blueprint, I've found it difficult to debug using either the in-browser dev tools or just using console.log(). Setting a breakpoint in the game loop means I have to continue past that breakpoint hundreds of times to find the exact moment I care about. Printing out variables has a similar issue: it causes a deluge of console logs to sift through.

I needed a way to 1) pause the game at any time, and 2) view the current values of properties in my game objects. I figured out that you can have multiple scenes running at the same time, and one scene can pause another scene. So, I created a debug scene which listened for a key to be pressed to pause the main game scene. From there, I added the ability to configure game objects with a list of properties that should be debugged, and the debuger scene prints out their values overlayed over the game scene.

I've since added more features, like slowing down game time, a menu, and the camera rotation and coordinates within the scene. I'm sure I will add more features as I find a need for them. If you find a bug or have a feature you would like added, please create a ticket on the github project. I hope you find this to be a helpful tool!