How to use PluginDebugService and Rojo to develop plugins in external editors

The Plugin Debugging Service is one of the most powerful tools out there for plugin developers, and can let you take your development to the next level when fixing bugs.

This tutorial attempts to showcase how to use Rojo and the Debug service to create plugins in external editors without having to sync once.

Prerequesities

  1. Rojo.exe is installed and preferably in the $PATH environment You can install the rojo.exe application here
  2. PluginDebuggingService is enabled (this tutorial will explain how to enable it, but if you have it already enabled, skip to step 3)
  3. Some Lua knowledge, obviously.

To begin with, we’re going to go over how to enable the Plugin Debugging Service, if you already have this enabled, skip to stage 3

Step 1: Enable the Plugin Debugging beta from the Beta Features window
image

Press save, then restart studio (you’ll be prompted to do it anyway)

Step 2: As the description suggests, go to Studio Settings then turned on Plugin Debugging Enabled (you can open the window with Alt+S)
image

You’ll be prompted to restart Studio again, but before doing so, proceed with Step 3

Step 3: Create an empty folder with an empty script
image

Save this folder as an RBXM in your Studio’s Local Plugin Directory. (Press Save To File, not Save as Local Plugin)
image

Finally, for this step, restart Studio. This is so Studio knows to load the RBXM into the plugin debugger, and can then be used with your external editor for incrementally building changes.

Step 4: Create a Rojo Project for your plugin.
I’m going to gloss over this step, but for more information on how to use Rojo projects, click here

For now, assume we have this workspace set up in vscode.

image

Step 5: Write your plugin as expected, this plugin, I’m going to copy the Wiki’s example of creating an empty script

Step 6: Build your project through Rojo using the command bar, this example assumes you have Rojo in your PATH enviornment. vscode provides a built-in PowerShell terminal to save you some time.

image
(if you called you rbxm someting other than EmptyScriptAdder, replace it with that)

EDIT: vscode provides a GUI based command you can execute using Ctrl+Shift+P
image

Step 7: Reload the plugin in Studio using PluginDebugService.
image

The plugin should’ve now have reloaded the change that you made in vscode, and you can repeat steps 6 and 7 to incrementally update your development plugins.

(oh yea i put my reload plugin shortcut on F13, saves some time heh)

25 Likes

I’m not really sure how this is supposed to help developers. As a developer there are already services inside of studio you can use. Seems cool, but I’ll pass.

PluginDebugService allows you to better iterate development on plugins without consistently having to restart Studio to see the changes active.

For the power users or folks who are already heavily externally based, they can add plugin work to their workflow or just generally have a better experience building their plugins with a proper code editor. It’s helpful to you only if you find it helpful.

You’ve mentioned that there are already services in Studio: could you explain what those services are that we can use and how they can accomplish what the tutorial is teaching or something to the same extent? You said you’ll pass and suggested the existence of other tools, so for the sake of discussion, would you mind sharing what those are so we can look into them? Don’t leave us hanging. :stuck_out_tongue:

5 Likes

If I’m not wrong, I think there is a code debugger already.

I don’t regularly make plugins let alone use these services, but I do not believe debugging is the point of the tutorial. The point of the tutorial is being able to improve the workflow of writing plugins by hooking up vscode to roblox using rojo, and this service happens to be necessary to reload the plugin, but I wouldn’t know since I don’t regularly develop plugins.

1 Like

I don’t really use plugins like this either honestly. I prefer to use Apache Netbeans as an IDE for my code instead of Microsoft Visual Studio.

1 Like

I just want to say, this is super useful for macOS plugin scripters. ScriptEditor is quite laggy, and this plugin can make us use Visual Studio so everything is nice and smooth!

There are a lot of reasons for using Rojo. You can use Roblox-TS, Git, GitHub/GitLab, CI/CD, and many other externally available services. A lot of the top games on Roblox use Rojo to help improve their workflow. (Adopt Me for example)

A bit late here but I’m not too sure what the point of bringing up IDEs is! Visual Studio Code is the program that’s in discussion here and it’s a text editor, not an IDE. We aren’t talking about IDEs because they have little to no applicability to Roblox. Additionally, this isn’t just about debugging! Please make sure you have the full context for a more informed reply.

If you don’t use Rojo, VSC or any kind of external workflow, then this resource isn’t for you. You probably shouldn’t have called this resource unhelpful and even then that’s not very constructive feedback for this resource, it’s not mentioning how it can be made helpful. This knowledge can be very helpful for other developers who want or need this in their workflows.

Sorry, but I don’t agree with your stance on this being unhelpful at all and there are also no services in Studio that can do this same thing or better as speculated. I think it’s great that OP shared this with us and some people might be able to take good advantage of this. :slight_smile:

1 Like

Great! I always wondered how the PluginDebugService worked. Shame it’s not got an auto-reload function, but that’s probably for the best. Will be giving this a go.

I was using the hot reload method found in the Tag Editor Plugin by @Sweetheartichoke in a few of my plugins, which works great, but obviously you get errors pop-up if you save mid-code.

What does the project json file look like?

You can use rojo init plugin in the CLI or by pressing F1 and typing Rojo: Initialise in vscode

Yuh I figured it out, thanks.

Used this:

{
  "name": "src",
	"tree": {
		"$className": "Folder",
		"$path": "src"
	}
}