Debugging Firebot

Firebot is built with Electron which runs two separate Node processes. The first is the "Main" process, which is where the app is started and ran from. The second is the "Renderer" process which is what hosts the Chromium instance that displays the web views. From a web dev point of view, you could think of the main process as the "back end" and the renderer process as the "front end". Debugging is handled differently for each process.

Debugging the Main Process (via VS Code)

Main process code is largely located in the /backend directory.

To debug the main process, simply go to the Debug tab and click on the green play button to launch a debug session:

Firebot will start and debug controls will become available. That's it! You can set breakpoints, inspect variables, and step through code.

1. A breakpoint (Pauses code execution)
2. Inspecting a variable at run time
3. Debug toolbar with buttons for things like stepping through code line by line.

Learn more about what you can do with VS Code debugging here: https://code.visualstudio.com/docs/editor/debugging

Debugging the Renderer Process

Renderer process code is located in the /gui directory.

Since the front end is largely encompassed in an AngularJS app, the easiest way to debug the renderer process at this time is to debug using Chromium's dev tools.

To do this, simply add the line debugger; anywhere in code you'd like execution to pause. This essentially serves as a breakpoint for Chromium. Now just start the app (either normally via terminal or via the debug tab), open the Dev Tools console, and then navigate or run through the workflow for whatever you are debugging. When the code hits the debugger; line, execution will automatically pause and you can use the chromium dev tools to inspect variables or step through code.

Note: Execution will only pause if you have the dev tools open before the code hits the debugger; line.