使用Visual Studio代码调试Electron-Atom脚本 [英] Debugging Electron-Atom script with Visual Studio Code

问题描述

Electron 是否在 Visual Studio代码？

如果是，如何设置一个简单的环境，我可以使用Visual Studio Code编写/ webug Atom Electron脚本？

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

例如我使用 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 配置文件，但我没有说如何为Electron工作设置Visual Studio代码。

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.

推荐答案

答案取决于是否要调试主进程或渲染器进程。

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

主要流程：

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

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

或者，有一种方法可以配置Visual Studio代码来运行Electron并在同一进程中附加调试器。请在此处查看此主题： Visual Studio Code是否可以配置为发射电子。我还写了关于如何在我的博客上设置这个内容： http://www.mylifefortcode.com/getting-started-with-electron-in-visual-studio-code/ 在这里： http://www.mylifeforthecode.com/a-better-way-to-launch-electron -from-visual-studio-code /

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: http://www.mylifeforthecode.com/getting-started-with-electron-in-visual-studio-code/ and here: http://www.mylifeforthecode.com/a-better-way-to-launch-electron-from-visual-studio-code/

渲染器流程：

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

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

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

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。

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

但是，您可以使用Chrome的DevTools来调试这些过程。在BrowserWindow上调用 openDevTools（）或 toggleDevTools（）方法，你将获得相同的工具集如果你在Chrome中按F12，你会这样做。您需要解决一些时序问题才能连接调试器。请参阅此主题： Atom Electron - 检测开发工具准备工作周围。我也在我的博客上写了这篇文章： http：//www.mylifeforthecode的.com /调试呈现器进程式电子/ 。

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: http://www.mylifeforthecode.com/debugging-renderer-process-in-electron/.

这篇关于使用Visual Studio代码调试Electron-Atom脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！