Debugging

Debugging Electron App: Main and Renderer Processes

This guide will walk you through setting up your debugging environment and demonstrate how to debug both the main process and the renderer process of the application. We will use Visual Studio Code (VSCode) to debug the main process and Chrome DevTools for the renderer process.

Prerequisites

• Visual Studio Code installed
• Node.js installed

Setup

1. Clone the repository containing the Electron app and the launch.json configuration file.

git clone https://github.com/ItsSim/fsolauncher.git
cd fsolauncher/src

2. Install dependencies:

npm install

3. Open the root folder (not src, one level up) of the repository in Visual Studio Code.

Debugging the Main Process (VSCode)

1. Go to the "Run and Debug" tab in VSCode, which can be found in the Activity Bar on the side, or use the Ctrl+Shift+D shortcut.

2. In the "Run and Debug" tab, you should see a dropdown menu with the available debug configurations. Select the "Debug Main Process" configuration, which corresponds to the provided launch.json file.

3. Press the green "Play" button or press F5 to start the debugging session. The Electron app will launch, and you'll be able to set breakpoints, step through code, and inspect variables in the VSCode debugger.

4. To set a breakpoint, click on the left side of a line number in the editor or press F9. When the breakpoint is hit, the execution will pause, allowing you to inspect the current state of the app.

5. To step through the code, use the debugger control buttons on the top of the "Run and Debug" tab:

• "Step Over" (F10): Executes the current line and goes to the next line in the same function.
• "Step Into" (F11): Executes the current line and goes into a called function.
• "Step Out" (Shift+F11): Executes the remaining lines in the current function and goes back to the calling function.
• "Continue" (F5): Continues the execution until the next breakpoint or the end of the program.

6. The "Variables" section in the "Run and Debug" tab allows you to inspect the current state of local and global variables.

7. The "Debug Console" at the bottom of the window enables you to interact with the app's JavaScript context during the debugging session.

Debugging the Renderer Process (Chrome DevTools)

1. Modify src/FSOLauncher.ini - which is generated when running the launcher for the first time, via npm run start for example.

2. Add the Debug key in the launcher section:

Debug=1

This will make the Chrome DevTools popup next time you start the launcher.

Conclusion

By following these steps, you've successfully set up your environment to debug both the main and renderer processes of the application. This setup will allow you to efficiently identify and fix issues in the application while taking advantage of the powerful features provided by VSCode and Chrome DevTools.