Rpg Maker Developers Group

Developing and debugging plugins for RPG Maker sometimes are trial and error, it's really annoying to write and delete console.log all over the places just to find what's wrong. And, Debug Tool comes to rescue!

I, Prepare
The easiest to setup and most lightweight editor is VS Code, so we will use this in this tutorial. I won't cover other IDE and Editor since I only use VS Code.

Secondly, you will need Debugger for NWjs extension if you want to directly debug with Play Test button in RMMV editor, and Debugger for Chrome if you want to debug with either Chrome or Electron.js. If you debug with RMMV Editor Playtest, you need to install nwjs in VS Code after download Debugger for NWjs extension by press CTRL SHIFT P (or Cmd SHIFT P in macOS), find NWjs Install and choose latest version to install.

And finally, you will need to create a launch file after setup all above extensions. Choose NWjs if you want to test from RMMV Editor, Chrome if you want to debug with playtest in Chrome.

Now open file package.json and add this line right after js-flags line: "chromium-args": "--remote-debugging-port=9222",
The port in added line should be the same as the port in launch file.

For testing in Chrome, this official doc will be better: https://github.com/Microsoft/vscode-chrome-debug

II, Testing
Now open RMMV Editor and start Playtest, then open the console by press F12 (you cannot attach by following next step)
Then choose Attach to NWjs from Debug tab in VSCode and press play next to it!
Now we will try to debug Yanfly's CoreEngine by setting breakpoint at a random line! (Set breakpoint by clicking to the area right before the line number)
As you can see, you can add Watch to see certain variables in current state too. Next you can try various things and try some debug button on the top (Continue, Step Over etc...). Don't worry, it won't break your game. The game in Playtest will be halted, you need to press Continue (the far left button on debug toolbar on the top of VSCode) to continue the game (or continue to next breakpoint).

If you setup a RMMV project with any bundle tool (webpack etc...) and have the RMMV project inside a sub-folder (like folder demo in picture below) while your main source of plugins is inside another sub-folder (like folder src in picture below), you need to setup pathMapping to map route /js to folder js inside demo:

Feel free to ask any question