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