使用 Visual Studio Code 调试 Electron-Atom 脚本

Question

Electron 是否在 Visual Studio Code 上运行？

如果是，如何设置一个简单的环境，我可以使用 Visual Studio Code 编写/webbug 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 Code，有一个 launch.json 配置文件，但我没有说明如何设置 Visual Studio Code 以供 Electron 工作。

Answer 1

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

主进程：

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

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

另外，还有一种方法可以将 Visual Studio Code 配置为运行 Electron 并在同一进程中附加调试器。在此处查看此线程：Can Visual Studio Code be configured to launch electron。我还在我的博客上写了如何设置它：https://mylifeforthecode.github.io/getting-started-with-electron-in-visual-studio-code/ 和这里：https://mylifeforthecode.github.io/a-better-way-to-launch-electron-from-visual-studio-code/

渲染进程：

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

今天，我们在所有平台上为 Node.js（JavaScript 和 TypeScript）提供了良好的调试支持，并在 OS X 和 Linux 上为 mono（C# 和 F#）提供了实验性支持。在 //build 中，我们强调了我们正在为 ASP.NET 5 添加的支持，并且我们计划添加更多支持。

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

但是，您可以使用 Chrome 的 DevTools 来调试这些进程。在 BrowserWindow 上调用 openDevTools() 或 toggleDevTools() 方法，您将获得与在 Chrome 中按 F12 相同的工具集。您需要解决一些时间问题才能连接调试器。请参阅此线程：Atom Electron - Detect Dev Tools ready 以解决此问题。我也在我的博客上写过这个：https://mylifeforthecode.github.io/debugging-renderer-process-in-electron/。

Answer 2

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

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

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