Electron開發實戰之記帳軟件20——主進程調試

代碼倉庫： https://github.com/hilanmiao/LanMiaoDesktop

Tips：由於我使用的是electron-vue腳手架，因此架構（文件目錄）比較複雜，若是你的項目很簡單，好比入口在根目錄的main.js中，那就不用看本篇文章了，直接右鍵debug運行就行了。

方式一：使用chrome://inspect調試

1.修改兩處代碼方便咱們調試

2.運行 npm run dev,而後在瀏覽器打開chrome://inspect

3.添加5858監聽的端口，

而後稍等一會或者刷新頁面後就會出現你要調試的目標了，點擊inspect

而後添加咱們的項目源碼目錄，並在彈出的受權窗口中選擇「容許」

而後開始調試咱們的代碼就ok了。

可是使用chrome://inspect有一些注意事項，能夠參考文章 https://newsn.net/say/chrome-inspect-electron.html 其實也沒有做者說的這麼麻煩，不過確實要多試幾回熟悉了就很順暢了。

方式二：使用webstorm調試（有問題，待完善）

目前有問題，調試確實能夠，可是我畫面沒有渲染出來哇！！！這個等我再諮詢下別的同志吧

若是你用的是比較簡單的架構，好比官方的quick-start這種，入口就是在根目錄下，怎麼折騰都是ok的，直接右鍵debug，so easy......

可是個人項目比較複雜，全部是須要配置兩個地方，如圖

Node interpreter: 項目目錄/node_modules/.bin/electron.cmd(mac下是/electron)
Node parameters: --inspect-brk=5858 .

而後debug就ok了

方式三：使用vscode調試

好像vscode也很簡單，不過我沒試過，推薦你們看看蘇南大叔的文章

https://newsn.net/tag/vscode/2/