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

问题描述

Electron 是否在 Visual Studio 代码 ?

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

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

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

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

对于 Visual Studio Code，有一个 launch.json 配置文件，但我没有说明如何设置 Visual Studio Code 以供 Electron 工作.

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.

推荐答案

答案取决于你是要调试 Main 进程还是 Renderer 进程.

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

主进程:

可以使用 Visual Studio Code 调试主进程.您必须在启动时将 --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 Code 配置为运行 Electron 并在同一进程中附加调试器.在此处查看此线程:Can Visual Studio Code配置为发射电子.我还在我的博客上写了如何设置它: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/

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/

渲染进程:

我不知道使用 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)提供了良好的调试支持，并在 OS X 和 Linux 上为 mono(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 - 检测开发工具准备就绪大约.我也在我的博客上写过这个:https://mylifeforthecode.github.io/debugging-renderer-process-in-electron/.

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

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