Electron開發使用Vue Devtools

轉自 [https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/]

2.2 安裝步驟
首先在Chrome中安裝Vue Devtools；
在Chrome中打開about:extensions，並且開啟開發者模式，這樣就可以獲取擴展程序的ID，記住這個ID，例如我這邊的值是nhdogjmejiglipccpnnnanhbledajbpd，下面需要用到。
打開文件管理器或者Finder，導航到Chrome保存擴展程序的文件夾：
在Windows上：%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions
在Linux可能是（看不同的版本）：
~/.config/google-chrome/Default/Extensions/
~/.config/google-chrome-beta/Default/Extensions/
~/.config/google-chrome-canary/Default/Extensions/
~/.config/chromium/Default/Extensions/
在Mac上是：~/Library/Application Support/Google/Chrome/Default/Extensions
在上面的文件夾中找到剛才獲取的ID對應的那個文件夾，打開，記錄下文件夾中存在的文件夾名字，一般是版本號。這樣就獲取了最終需要使用的文件夾地址。例如我這邊這個地址是：~/Library/Application Support/Google/Chrome/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/3.1.2_0。
在Electron應用中添加如下代碼：

app.on('ready', createWindow)

function createWindow() {
    ...
    // Open the DevTools.
    if (process.env.NODE_ENV === 'development') {
           BrowserWindow.addDevToolsExtension('/Users/ybx/AppData/Local/Google/Chrome/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/4.1.5_0')
    }
    ...
}