關於electron的基本調試

介紹

調試是開發中必不可少的一個過程，electron分為主進程和渲染進程，所以需要有分別調試這兩個進程

 

渲染進程調試

electron渲染進程的調試跟web開發的調試過程差不多一樣，因為這個進程相當於Chromium 的一個窗口，在開發環境中可以設置：win.webContents.openDevTools() 來打開devtools來調試代碼。

 

接下來就可以對渲染進程進行調試，

 

vue-devtools

通常我們是使用vue+electron的模式進行開發，而在平時vue開發中，我們通常使用vue-devtools進程代碼的調試，那么在electron中，我們就要想辦法去加載vue-devtools這個插件

在electron-builder這個模板中提供了installVueDevtools這個模塊去加載vue-devtools

import {installVueDevtools } from "vue-cli-plugin-electron-builder/lib"
...
app.on("ready",()=>{
   if(isDevelopment && !process.env.IS_TEST) {
   // Install Vue Devtools
       try {
         await installVueDevtools()
        }catch (e) {
         console.error('Vue Devtools failed to install:', e.toString())
    }
  }
})

 

然而這個installVueDevtools需要上網，才能下載vueDevtool到本地，所以我們需要另外一個版本，經過多方面的嘗試，得到如下這種辦法，首先下載在git下載vue-devtools編譯后，把編譯的文件放到項目如圖：

 

然后在通過electron的session模塊加載

session.defaultSession.loadExtension(
      path.resolve(__dirname, "../shell-chrome")
    ).catch(e => {
      console.error("Vue Devtools failed to install:", e.toString());
    }).then(e => console.log(e));

 

效果如下

 

主線程調試

需要配置vscode，打開vscode的debug 添加 配置

{
    "version": "1.3.0",
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
        "program": "${workspaceFolder}/src/main.ts",
        "protocol": "inspector",
        "args" : ["."]
      }
    ]
  }

 

不過有點坑的是不支持import的需要是用require才行不然會報錯：

 

所以基本上我是使用console.log來調試

 

總結

electron的調試基本是這些，雖然很簡單，但是也有不少人不知道的，特別是vue-devtools