[Tool] Phaser Data Inspector - Real-time DevTools extension for Phaser games

[renatocassino]

Hey everyone

I’ve just released a small DevTools extension that might be useful for Phaser developers:

Phaser Data Inspector — a browser DevTools panel that lets you see Phaser’s data changes in real time, similar to how Redux DevTools or Mobx devtools works for React.

It hooks into Phaser.Data.DataManager and logs every update that happens in your game, showing:

• The scene or registry where it happened

• The key/value being changed

• The timestamp

• Optional Phaser Hooks context info (if you use phaser hooks library)

---

Why I built it

I found myself constantly debugging with console.log() to track what was happening inside scene.data or the global registry.
So I decided to build a proper DevTools panel to visualize it instead — and it’s been a huge help when debugging complex state logic.

---

Download links

Chrome: https://chromewebstore.google.com/detail/phaser-data-inspector/jjcogkkooficbbdhfcamcojmepbjnpdk
Firefox (pending review): https://addons.mozilla.org/pt-BR/firefox/addon/phaser-data-inspector/

---

How to use

1. Install the extension

2. Open your game in the browser

3. Open the DevTools → Phaser Data Inspector tab

4. Watch data updates happen in real time

---

It’s a small open experiment for now - I’d love any feedback, suggestions, or bug reports from the community.

Some prints:

Cheers,
Cassino

[frederikocmr]

Nice. Thanks for sharing it. I tried here and could not see the tab appearing on my browser dev tools. It said it injected something tho

[renatocassino]

Yes, the extension needs to inject a small script so the Phaser Data Inspector can start listening to Phaser events. I’ll record a short video tutorial soon to show the full process.

For now, here’s how to get it working:

1. Open the page with your Phaser game.

2. Next to the address bar, click the Phaser Data Inspector extension icon.

3. A small popup will appear asking you to “Inject” (see screenshot below).

   
   
   This injects a JavaScript snippet into the page so the inspector can start listening.

4. After that, right-click the page → Inspect.

5. In the DevTools panel, look for the last tab — “Phaser Data Inspector.”
   Sometimes there are too many tabs, so you might need to click the little » arrow at the end to find it.

[renatocassino]

@frederikocmr

Nice. Thanks for sharing it. I tried here and could not see the tab appearing on my browser dev tools. It said it injected something tho

Did it work for you?
If you still can’t get it to work, just ask here and I’ll help you.