href tro tle ram 發布 谷歌 所有 ati 程序

Visual Studio Code調試electron主進程

作者: jekkay 分類: electron 發布時間: 2017-06-11 14:56

一·概述

此文原出自【水滴石】： http://www.easysb.cn

對於窗口中的javascript腳本，我們可以通過谷歌瀏覽器的很多插件來調試，比如DevTools等。但是對於Electron中的主程序，我們需要額外的工具和方法來進行調試。

對於Electron程序，可以通過以下的命令啟動程序，以方便外部調試工具通過V8調試協議來調試，其命令格式如下：

# elctron –debug=${port} path/to/app

# electron –debug-brk=${port} path/to/app

上面兩種啟動方式，都會使得Electron進程在指定的端口監聽。這樣，外部的調試工具就可以通過此端口，通過V8調試協議調試主程序。

二·VSCode 調試

使用Visual Studio Code可以調試Electron的主程序，這給我們開發調試帶來很大便捷，方法如下：

1) 在當前工程下，創建文件 .vscode/launch.json

2) 在該文件中輸入以下內容

{ “version”: “0.2.0”, “configurations”: [ { “name”: “Debug Main Process”, “type”: “node”, “request”: “launch”, “cwd”: “${workspaceRoot}”, // “runtimeExecutable”: “${workspaceRoot}/node_modules/.bin/electron.cmd”, “runtimeExecutable”: “C:/Users/Administrator.SKY-20170407TCX/AppData/Local/Yarn/bin/electron.cmd”, “program”: “${workspaceRoot}/main.js” }] } 註意以下兩個問題: a) 路徑問題 如果electron是局部安裝的話，就執行局部環境路徑，例如”${workspaceRoot}/node_modules/.bin/electron.cmd”，如果是全局安裝的話，先執行yarn global bin查看全局的路徑，然後將electron的路徑填寫進去，比如我的全局路徑就是”C:/Users/Administrator.SKY-20170407TCX/AppData/Local/Yarn/bin/electron.cmd”。 b) 文件名 Linux和Windows的文件名會有所有不同，Windows的是electron.cmd，Linux的是electron，註意區分，最好的辦法就是去路徑下查看一下到底叫什麽鬼！ 3) 接下來，就可以點擊菜單Debug -> Start Debugging，也可以直接按快捷鍵F5，啟動程序。 4) 為了測試是否可以單步之類的操作，我們在主程序的第一行，打下斷點，然後按下F5啟動，主程序就斷在了第一行代碼中,而且還可以單步、查看變量以及調用棧等，相當方便，如下圖。

Visual Studio Code調試electron主進程