visualstudiocode 調試electron

1. 相關鏈接

1. 國外的人寫的一篇博客：http://floatincode.net/post/debugging-electron-application-with-visual-studio-code

 

2. 調試的原理

： http://electron.atom.io/docs/v0.27.0/tutorial/debugging-main-process/

總結來說就是在控制台用electron啟動程序的時候添加--debug port的參數，然后在visualstudiocode的調試界面里面attach到debug的端口上面，就可以完成electron的調試了。

 

3. 調試

 

調試的步驟一共分為三步：

（1）利用debug模式啟動應用程序

在控制台啟動程序  electron . --debug=5858 （注：推薦使用--debug-brk，這個參數代表在第一行就開始斷點，因此我們的ide在attach該進程的時候，程序才運行到第一行，我們就能按照我們的需要調試相應地方的代碼）

 

 

（2）在visualstudiocode里面設置好attach的配置。

因為我們的ide只是attach到程序里面進行調試，因此我們只需要修改attach部分的配置。在attach部分的配置的最后添加

 "address": "localhost"即可。

 

具體全部的配置如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null,
            "address": "localhost"
        }
    ]
}

 

如何生成lanuch.josn文件參照visualstudiocode的官網： https://code.visualstudio.com/docs/runtimes/nodejs

 

（3）點擊調試按鈕或者f5即可attach到electron程序的主進程進行調試。

 

 

注意：調試的模式那里選擇attach