Debug RMMV plugins with VS Code

じ☆ve冰风

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.
Spoiler












Now open file package.json and add this line right after js-flags line: "chromium-args": "--remote-debugging-port=9222",
Spoiler





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)
Spoiler





Then choose Attach to NWjs from Debug tab in VSCode and press play next to it!
Spoiler





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)
Spoiler





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:
Spoiler






Feel free to ask any question



本贴来自国际rpgmaker官方论坛作者:Dr.Yami处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/debug-rmmv-plugins-with-vs-code.99980/