最近在用electron做端應用，使用了Vue，自然就需要調試工具，下面詳細描述一下electron的Vue.js devtools插件安裝方式（Windows環境）
-
確保Chrome瀏覽器中已安裝Vue.js devtools插件
打開擴展程序
查看擴展程序中是否已安裝Vue.js devtools插件
上面是我曾經使用過的兩種Chrome插件安裝方式。第一種是現在有些Chrome版本不讓直接導入從別處下載的插件，會提示【程序包無效:"CRX_HEADER_INVALID"】，然后采用網上的一些方法將插件解壓后，加載已解壓的擴展程序，這種方式可以看到插件來源是解壓后的地址。第二種方式是看着是從Chrome網上應用商店安裝其實是在https://pictureknow.com/網站上下載的Chrome插件，這個網站下載的插件可以直接導入擴展應用。所以建議大家采用這種方式，另外這里看到的ID信息后面有用
-
獲取Vue.js devtools在電腦中的安裝位置
按上述建議方式安裝的插件位置是在Chrome安裝位置里面的，下圖是我的路徑
-
使用
BrowserWindow.addDevToolsExtension(extension)API
這是electron官網對
BrowserWindow.addDevToolsExtension(extension)API的使用介紹，簡單來說就是在electron的主進程main.js中使用API,唯一參數為插件路徑，上圖中引入Node的path、os模塊都是為了拼接得到Vue.js devtools的所在路徑，這里我直接采用絕對路徑（簡單明了）
這時報錯了，BrowserWindow.addDevToolsExtension is not a function,不應該啊，官網提供的API不應該不是一個函數啊，這時回頭再看文檔：
這時改一下API調用位置 ：
app.on('ready',createWindow)說明監控app.readey事件觸發調用了創建窗口事件，那么我們就把BrowserWindow.addDevToolsExtension方法寫在createWindow中，再嘗試一次：
成功！！！
- 總結
如果Chrome瀏覽器沒有安裝Vue Devtools插件，去https://pictureknow.com/下載安裝
Chrome安裝過插件后，拿到插件地址，將BrowserWindow.addDevToolsExtension('這里是插件地址') 方法寫在app.ready執行之后即可
祝好