問題描述

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 腳本的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！