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')
    }
    ...
}