Electron开发使用Vue Devtools

最近在用Electron + Vue.js 2.0写一个桌面工具。使用下来感觉Electron用起来还是挺爽的。之前为了开发跨平台的桌面应用,我曾经用过Python+wxPython,Swing,SWT等各种技术,但是都有这样那样的问题(例如打包比较麻烦、界面各平台不太一致等)。而Electron基于目前成熟的前端技术,通过内嵌的浏览器内核实现了统一的表现形式,这一点用于做跨平台开发真是太方便了。

1. Electron介绍

Electron技术出现已经有几年了。这里只是简单记录一下:

简而言之,Electron 提供了一个实时构建桌面应用的纯 JavaScript 环境。Electron 可以获取到你定义在 package.json 中 main 文件内容,然后执行它。通过这个文件(通常我们称之为 main.js),可以创建一个应用窗口,这个应用窗口包含一个渲染好的 web 界面,还可以和系统原生的 GUI 交互。

具体来说,就是当你启动了一个 Electron 应用,就有一个主进程(main process )被创建了。这条进程将负责创建出应用的 GUI(也就是应用的窗口),并处理用户与这个 GUI 之间的交互。

但直接启动 main.js 是无法显示应用窗口的,在 main.js 中通过调用BrowserWindow模块才能将使用应用窗口。然后每个浏览器窗口将执行它们各自的渲染器进程( renderer process )。渲染器进程将会处理一个真正的 web 页面(HTML + CSS + JavaScript),将页面渲染到窗口中。鉴于 Electron 使用的是基于 Chrominum 的浏览器内核,你就不太需要考虑兼容的问题。

kmokidd 使用 Electron 构建桌面应用

2. 安装Vue Devtools

今天主要讲一下怎么在Electron中安装Vue devtools,以方便开发。方法参考Electron官方文档,这里只做记录和翻译。

2.1 特别说明

因为Electron是基于Chromium内核的,和Chrome同根同源。因此这里的方法是在Chrome安装Dev Vuetools,然后添加到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应用中添加如下代码:
1
2
3
4
5
6
7
8
9
10
app.on('ready', createWindow)

function createWindow() {
...
// Open the DevTools.
if (process.env.NODE_ENV === 'development') {
BrowserWindow.addDevToolsExtension("/Users/zhang/Library/Application Support/Google/Chrome/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/3.1.2_0");
}
...
}

2.3 限制

  • BrowserWindow.addDevToolsExtension需要在ready事件之后调用,我上面的代码就是在app的ready事件中调用的;
  • Electron版本不能低于1.2.1,因为对Extension tools的支持API是这个版本添加的。

附录A. 参考资料

热评文章