Make games with Superpowers — The extensible, collaborative HTML5 2D+3D game maker

Debugging your game

When using Superpowers from the app, you can open up the debugging tools by clicking on the Debug game button (or by pressing F6). Most browsers will let you open similar debugging tools by hitting the F12 key while running the game.

Since the Superpowers app is built on NW.js, which is based on Chrome's runtime, the built-in debugging tools are those of Chrome too.

The two main tabs you'll care about when starting are:

Debugging and inspecting your game's state

Check out this overview of the Chrome DevTools as well as this introduction to debugging JavaScript. While Superpowers actually uses TypeScript, it is a superset of JavaScript so most of the information there should apply.

With the debugger open, you can use Ctrl+P and type the name of one of your script assets to jump directly to it. Place a breakpoint in the update method of a behavior for instance, and your game will stop as soon it reaches that line again.

When a breakpoint is hit, the right pane will show the Call Stack (showing you how your game reached the current function/method, like breadcrumbs) as well as Scope Variables, letting you inspect the content of all variables currently accessible.

F10 lets you step forward one instruction at a time (useful if you want to inspect the details of a function one step at a time), while F8 will resume the game's execution.

You may want to enable "Pause on uncaught exceptions" so that your game will automatically stop at the specific line a runtime error is encountered and let you inspect the call stack and program state. This only has an effect when the debugger is open.