CODEWITHSUNDEEP
javascriptvisual-studio-codeelectron
LeMoussel
LeMoussel

Reputation: 5767

Debugging Electron-Atom script with Visual Studio Code

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.

Upvotes: 3

Views: 5227

Answers (2)

Shawn Rakowski
Shawn Rakowski

Reputation: 5714

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/.

Upvotes: 3

octref
octref

Reputation: 6801

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

Upvotes: 1

Related Questions