Electron+Vue項目安裝vue-devtools插件

1. 安裝vue-devtools

# 下載vue-devtools源碼
git clone https://github.com/vuejs/vue-devtools

# 切換至master分支（因為官方默認是dev分支）
git checkout master

# 切換至vue-devtools目錄
cd vue-devtools

# 安裝依賴包
npm install 

2. 修改shells/chrome目錄下的manifest.json

# 將persistent的值由false->true
"background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent":  true
}, 

3. 編譯

npm run build

4. 加載擴展

a. 打開chrome瀏覽器，進入更多程序→擴展程序，或者直接在瀏覽器上輸入 chrome://extensions/ 進入

b. 點擊【加載已解壓的擴展程序】

c. 選擇剛才vue-devtools目錄下載chrome文件夾，即 vue-devtools/shells/chrome

d. 瀏覽器擴展中將出現 vue-devtools 擴展圖標

5. 在electron項目用加載vue-devtools

瀏覽器插件安裝完成，普通的vue web項目可以在瀏覽器中出現vue-devtools插件，啟動electron項目，還是不行，需要在代碼中加入相關代碼片段。

在src/main/index.dev.js中加入如下代碼：

BrowserWindow.addDevToolsExtention("/path/to/vue-devtools/shells/chrome")

其中BrowserWindow我們通過require("electron")來引入，在on ready部分加入插件代碼，如下所示：

async function createWindow() {
  // 引入vue-devtools 擴展
  BrowserWindow.addDevToolsExtension('D:/Code/Others/vue-devtools/shells/chrome');
  // Create the browser window.
  const win = new BrowserWindow({
    frame: false,
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

6. 特別說明

安裝vue-devtools插件到chrome瀏覽器中，不一定需要通過源碼編譯安裝，可以通過下載推薦的crx文件，下載地址： https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd ，這種crx文件的擴展程序，需要手動拖入到Chrome瀏覽器的擴展程序界面這里。但是用在Electron+Vue項目中時，需要編譯安裝。

7. 參考資料

1. electron+vue項目安裝vue-devtools插件

2. vue 調試程序的安裝（谷歌瀏覽器chrome的vuejs devtools 插件的安裝）