3

Does Electron run on Visual Studio Code ?

If yes, how to setup a simple environment where I can write/webug Atom Electron script using Visual Studio Code ?

For example I with this Test.js script;

var app = require('app');

process.on('uncaughtException', function(error) {
    console.error("ERROR Exception => " + error.stack);
})

app.on('ready', function() {
    console.log('ready!');
    aksjdflkasjdf(); // Caught Exception
})

For Visual Studio Code there is an launch.json configuration file but I don't say how to setup Visual Studio Code ready for Electron work.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
LeMoussel
  • 5,290
  • 12
  • 69
  • 122

2 Answers2

3

The answer depends on whether you want to debug the Main process or a Renderer process.

Main Process:

It is possible to debug the Main process using Visual Studio Code. You must pass --debug=<port> into Electron on startup and then configure the debugger in launch.json to attach to it. Attaching takes a little while so you may need to put a wait in to debug the parts that run on startup. Your launch.json file should have this:

    {
        "name": "Attach",
        "type": "node",
        "address": "localhost",
        "port": <port>,
    }

Alternatively, there is a way to configure Visual Studio Code to run Electron and attach the debugger in the same process. Check this thread here: Can Visual Studio Code be configured to launch electron. I also wrote about how to set this up on my blog here: https://mylifeforthecode.github.io/getting-started-with-electron-in-visual-studio-code/ and here: https://mylifeforthecode.github.io/a-better-way-to-launch-electron-from-visual-studio-code/

Renderer Process:

I am not aware of a way to debug a renderer process with Visual Studio Code. Per their documentation:

Today we have good debugging support for Node.js (JavaScript and TypeScript) on all platforms and experimental support for mono (C# and F#) on OS X and Linux. At //build we highlighted the support we are adding for ASP.NET 5 and we plan to add more.

Check out https://code.visualstudio.com/docs/debugging. Note there is no mention of JavaScript in the browser.

However, you can use Chrome's DevTools to debug these processes. Call the openDevTools() or toggleDevTools() method on the BrowserWindow and you'll get the same set of tools that you do if you press F12 in Chrome. There are some timing issues you'll need to work out to get the debugger attached. See this thread: Atom Electron - Detect Dev Tools ready for a work around. I also wrote about this on my blog here: https://mylifeforthecode.github.io/debugging-renderer-process-in-electron/.

Shawn Rakowski
  • 5,644
  • 2
  • 27
  • 29
  • The post http://www.mylifeforthecode.com/debugging-renderer-process-in-electron/. does not result in you being able to debug the renderer process. It just pops up the dev tools for the currently focused web page. – Johann Jan 22 '17 at 23:03
1

I wrote a blog post about this topic: http://code.matsu.io/1

I covered debugging both Main and Renderer process, and the method I used works on all platforms, including Windows.

The code is at: https://github.com/octref/vscode-electron-debug

octref
  • 6,521
  • 7
  • 28
  • 44
  • First of all: Thank you for your blog. As far as I understand (I'm a newbie) this explanation is working with node. But what about node2? Node seems to be deprecated more or less. Maybe it could be helpful for newbies like me to get plain information on how to setup Visual Studio Code to work (and debug) with Electron? I also found a link to Devtron. It seems to be a helpful extension. But it even gets me a little more confused. – user3350279 Jan 09 '17 at 07:48
  • @user3350279 Node2 is experimental. I think the blog is pretty clear, as I included two sample project and how I set them up. I'm not familiar with Devtron. – octref Jan 10 '17 at 07:36