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

debugcn 发表于 Dev

勒穆塞尔

如果是，如何设置一个简单的环境，使我可以使用Visual Studio Code编写/调试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。

肖恩·拉科夫斯基（Shawn Rakowski）

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

主要过程：

可以使用Visual Studio Code调试Main进程。您必须--debug=<port>在启动时进入Electron，然后在launch.json中配置调试器以附加到它。附加会花费一些时间，因此您可能需要稍等一下才能调试在启动时运行的部件。您的launch.json文件应具有以下内容：

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

另外，还有一种方法可以配置Visual Studio Code以运行Electron并在同一过程中附加调试器。在此处检查此线程：是否可以将Visual Studio Code配置为启动electronic。我也写了一篇关于如何设定在我的博客这件事：https://mylifeforthecode.github.io/getting-started-with-electron-in-visual-studio-code/这里：HTTPS：//mylifeforthecode.github .io /从可视工作室代码发射电子的更好方法/

渲染器过程：

我不知道一种使用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-检测开发工具已准备好解决。我还在我的博客上（https://mylifeforthecode.github.io/debugging-renderer-process-in-electron/）上写过有关此内容的文章。