Visual Studio Code Electron



Introduction

Electron at that time needed street credibility and exposure as a new web development tool. It is a hybrid tool that grants web developers the ability to create desktop applications in a web environment, with ease of use. Microsoft was happy to champion their cause to get more exposure in web development circles. WPF and UWP are good enough. Visual Studio Code Python Extension Improves Linting, More. Microsoft's Visual Studio Code team has updated the popular, open source Python extension it acquired a few months ago, adding yet more functionality to the tool that has been installed more than 6 million times. Key Action / Focus the search bar: Esc: Focus the search bar and cleans it ↓ Select the next search result ↑ Select the previous search result: Enter: Open the selected search result. A VS Code extension to debug your JavaScript code in Electron. This is a fork of vscode-chrome-debug which automatically downloads and runs Electron. This extension does nothing which fundamentally can not be done via vscode-chrome-debug and a proper launch configuration and exists purely for convenience.

Now that you’ve converted your project to use TypeScript, it is time to update your project’s configuration so that Visual Studio Code (VS Code) can debug your application.

In this post you will:

  1. Learn how Electron apps run.
  2. Debug your main process.
  3. Learn how to debug with Visual Studio Code.
  4. Debug your renderer process.
  5. Configure VS Code to debug both processes at the same time using multi-target (compound) debugging!

How Electron apps run

Electron apps are split into two processes:

  1. Main process
    • Your main.ts code (compiled to main.js) runs in the main process and is responsible for creating renderer process(es). This is the “backend”, or core, of your app.
  2. Renderer process
    • Your index.html (and any included *.js files or other *.html files) runs in the renderer process and is the “frontend”, or user interface, of your app.

Since your app is split into two processes you must tell VS Code which process it should debug when launching your app.

Debugging your main process

VS Code has built-in support for debugging Node.js and TypeScript. Open your project in VS Code (it may automatically open your project for you).

Don’t forget to press Ctrl+Shift+B (Cmd+Shift+B on macOS) to start the TypeScript compiler.

Only a few minor modifications are required to debug the main process of your app (main.ts).

Visual Studio Code Electron.exe

Open launch.json and make the following modifications (in bold):

This instructs Electron where your project is stored and to output debug logging to the console (these further aid debugging).

Save launch.json and click the Debug icon at the left of the VS Code window (picture of a bug with a slash through it) and you will see dropdown next to the gear icon has changed to reflect the new name.

Vscode Debug Electron

Debugging with Visual Studio Code

Now try debugging the main process by:

  1. Opening src/main.ts.
  2. Setting a breakpoint on line 11: win = new BrowserWindow({width: 800, height: 600}) by:
    • Clicking in the margin of the document to the right of the line number 11, or
    • Placing the text caret on line 11 and pressing F9.
  3. A red circle should appear to the right of the line number. Press F5 to start debugging the main process.

You will notice your app’s window has not appeared yet and that line 11 is now highlighted with a yellowish tint. This is the run cursor, which shows you what line will be executed next.

Move your mouse over the win variable and VS Code will show a tooltip telling you it is null since line 11 has not executed yet. Move your mouse over path or url on the lines above and VS Code will show you the details about each object.

You can quickly inspect variables by hovering over them with your mouse cursor.

You can use the debugging toolbar that has now appeared over the file tabs in VS Code to choose different debugging actions to take (in order from left to right, keyboard shortcuts in parenthesis):

Visual Studio Code Electron App

  • Continue (F5) This continues execution without stopping until the next breakpoint.
  • Step Over (F10) This executes the current line and moves the run cursor to the next line.
  • Step Into (F11) This moves the run cursor “inside” the line being executed, so if the line being executed contains a function call, the run cursor will move to the first line of the called function and you will be able to debug the function call. If the run cursor cannot move “inside” the line being executed it will be treated as if you performed a Step Over.
  • Step Out (Shift+F11) This continues execution until the end of the function call and will return the run cursor to the line being executed to either continue executing the line (if it has more function calls) or complete execution the line (if there’s nothing left to execute on the line).
  • Restart This stops execution of your application and starts it again.
  • Stop (Shift+F5) This stops execution of your application (ending your debugging session).

You can place multiple breakpoints in your source code and execution will stop whenever they are “hit” (encountered). Breakpoints greatly increase your ability to dig into how your application is running.

Press F5 to continue execution of your app. Your application’s window will now appear. Quitting your application will end your debugging session.

Debugging your renderer process

Before you can debug your renderer process you need to write some TypeScript code that will execute in the renderer process.

Create a new file in your src directory named renderer.ts. You will notice the TypeScript compiler creates a corresponding renderer.js file in your app directory. Enter the following code into renderer.ts:

Set breakpoints on lines 2 and 5 by placing the caret on each line and pressing F9.

Open app/index.html and add the following code before the closing tag (change [ to < and ] to >):

This will now cause Electron to load the compiled version of your src/renderer.ts file.

Now you need to update your .vscode/launch.json file to let VS Code know how to debug your renderer process. Add the following code (in bold) after your “Debug Main Process” configuration:

If there is a red squiggly underline at the opening curly brace of your “Debug Renderer Process” entry you need to add a comma after the closing curly brace of the “Debug Main Process” entry.

To enable VS Code to debug your renderer.ts file you need to ensure your main.ts file does not open the Chrome DevTools. Open your src/main.ts file and comment out line 21 by prepending it with // so it now shows:

If you open the Chrome DevTools via code in your main.ts file then debugging the renderer process will not work properly (since there cannot be two debug clients attached at the same time).

Save the launch.json file and click the Debug icon and change the dropdown to Debug Renderer Process. Press F5 to begin debugging your renderer process.

Notice your app launches without hitting the breakpoint in your main.ts file. In addition, the breakpoint on line 2 of src/renderer.ts was not hit even though that line of code has already been run (look at the console window to see the number 10). This is because VS Code’s debugger had not yet attached to your app by the time that code had run.

To debug code that is run before the renderer’s debugger has attached, launch your app and press Ctrl+R (Cmd+R on macOS) while focused on your app to reload its content (index.html). Now observe the breakpoint on line 2 is now hit. Your app’s window has become slightly dimmed and shows a message Paused in Visual Studio Code with two buttons: one for continuing execution and another to step over. Go back to your VS Code window and you will see that the run cursor is on line 2. Press F5 to continue execution and your app’s window undims.

If you remove your window’s menu by executing win.setMenu(null) after creating it, you will not be able to use Ctrl+R (Cmd+R on macOS) to reload your content. Therefore it is recommended to leave the menu in place until you are ready to distribute your app.

Try clicking on any of the text in your app’s window. Now your app’s window becomes dimmed again and shows a message Paused in Visual Studio Code. Go back to your VS Code window and you will see that the run cursor is on line 5. Press F5 to continue execution and your app’s window undims. Close your app to end your debugging session.

Debugging both processes at the same time (known as multi-target or compound debugging)

As of VS Code 1.8.1 (released November 2016), a feature known as multi-target debugging (also known as compound debugging) was released. It allows you to run two or more configurations when debugging.

You can’t combine both of your launch configurations since they each start new instances of your app, so you must create another configuration which attaches to a running process instead of launching a new process. You also need to specify the compound to run. Add these to your .vscode/launch.json file (in bold):

C++ In Visual Studio

Save launch.json. Click the Debug icon and change the dropdown to Debug Electron. Press F5 to begin debugging both your main process and your renderer process at the same time!

Visual Studio Code Electron Chromium

You should still have a breakpoint on line 11 of main.ts but you will notice it was not hit. This is for the same reason as when debugging the renderer: the debugger has not attached to the main process by the time the code has run. Switch to VS Code (while your app is still running) and create a breakpoint on line 28 of your src/main.ts file instead (which will be hit later). You can set breakpoints while your app is running.

Visual studio code electronic

If you want to debug code in your main.ts file that runs before the debugger has attached you will have to switch back to the Debug Main Process entry in the debug dropdown.

Now close your app’s window. After your app’s window disappears line 28 of main.ts is highlighted by the run cursor. Hover your mouse cursor over the win variable to see that it is not null (since the line has not executed yet). Press F5 to allow your app to exit.

Visual Studio Code Electron Typescript

If you are on macOS you may have to quit your app by using the Apple menu even though you have already closed the window.

Done!

You persevered through this long post and have learned how to debug your main process, your renderer process, and how to configure Visual Studio Code to debug both processes at the same time using compound debugging. Along the way you learned to expect some caveats while debugging Electron applications and you learned how to overcome them.