使用 Visual Studio 代码调试 Electron-Atom 脚本

Question

如果是，如何设置一个简单的环境，我可以在其中使用 Visual Studio 代码 write/webug Atom Electron 脚本？

例如我用这个Test.js脚本；

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
})

对于 Visual Studio 代码，有一个 launch.json 配置文件，但我没有说明如何设置 Visual Studio 代码为 Electron 工作做好准备。

Answer 1

答案取决于您是要调试Main 进程还是Renderer 进程。

主要过程：

可以使用 Visual Studio 代码调试主进程。您必须在启动时将 --debug=<port> 传递给 Electron，然后在 launch.json 中配置调试器以附加到它。附加需要一点时间，因此您可能需要等待以调试启动时运行的部分。您的 launch.json 文件应包含：

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

或者，有一种方法可以将 Visual Studio 代码配置为运行 Electron，并在同一进程中附加调试器。在此处检查此线程：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/

渲染器进程：

我不知道使用 Visual Studio 代码调试渲染器进程的方法。根据他们的文档：

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.

查看 https://code.visualstudio.com/docs/debugging。请注意，浏览器中没有提及 JavaScript。

但是，您可以使用 Chrome 的 DevTools 来调试这些进程。在 BrowserWindow 上调用 openDevTools() 或 toggleDevTools() 方法，您将获得与在 Chrome 中按 F12 时相同的工具集。您需要解决一些计时问题才能附加调试器。请参阅此线程：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/。

Answer 2

我写了一篇关于这个主题的博客post：http://code.matsu.io/1

我介绍了调试 Main 和 Renderer 进程，我使用的方法适用于所有平台，包括 Windows。

代码位于：https://github.com/octref/vscode-electron-debug

使用 Visual Studio 代码调试 Electron-Atom 脚本

Debugging Electron-Atom script with Visual Studio Code

javascript

electron

visual-studio-code