Boost you Phaser development speed with PGInspector

In a perfect world, each and every single line of your code works well and the results are exactly as you expected.

In the real world, the sad reality is we spend a lot of time debugging, prompting stuff on the console and losing the focus on what we actually love to do: building games.

This is why I am showing you FluxHunter‘s PGInspector.

It’s a tool which will inspect all your Game Objects and retrieve the series of useful information you usually find yourself to output with an inifinite series of console.log.

Have a look at this version of “A Life of Logic“:

As you can see, you can have a lot of information about any sprite or text by simply moving the mouse over it.

Then , if you want to automatically display its properties on the console, you just have to press SHIFT + C or click on GUI_CONSOLE tab.

Probably you may want to launch the game in a new page, open the console and play with all the commans you can find in the official project page.

Installing PGInspector is very easy: first, include the JavaScript file in index.html:

<!DOCTYPE html>
<html>
	<head>
        <style type = "text/css">
            body{
                background: #000000;
                padding: 0px;
                margin: 0px;
            }
        </style>
	<script src = "PGInspector.min.js"></script>
        <script src = "phaser.min.js"></script>
        <script src = "game.js"></script>
    </head>
	<body>
        <div id = "thegame"></div>
	</body>
</html>

Then, at the end of your create method, just add:

PhaserGUIAction(this);

And you’re done. Your productivity will speed up a lot, guaranteed. Download the source code with PGInspector library.