electron+vue(react、angular)如何安装DevTools

---

前言

在使用三大（Vue、React、Angular）框架开发 Electron 应用的时候，可以像开发web页面一样给 Electron 安装 开发者工具扩展（DevTools Extension）。这里整理了三种安装方式，各有利弊，请根据自身环境选择。

---

提示：各框架的安装方式类似，下面以Vue 为例：

方法一：npm 包安装

1. 安装 electron-devtools-installer

npm install electron-devtools-installer --save-dev
// OR
yarn add electron-devtools-installer -D

2. 引入主进程并配置

// main.js
import installExtension, { VUEJS_DEVTOOLS} from 'electron-devtools-installer';
// Or if you can not use ES6 imports
/**
const { default: installExtension, VUEJS_DEVTOOLS} = require('electron-devtools-installer');
*/
const { app } = require('electron');

app.whenReady().then(() => {
    installExtension(VUEJS_DEVTOOLS)
        .then((name) => console.log(`Added Extension:  ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});

方法二：编译后引入

此方式较为麻烦些，先对前端框架的Chrome扩展攻击 源码进行编译，编译后再指定插件路径。

1. 克隆源码到本地

git clone https://github.com/vuejs/vue-devtools.git

2. 安装依赖

npm install

3. 运行编译成.crx文件

npm run build

4. 配置扩展

配置扩展插件 前往配置扩展

方法三：Chrome商店安装

1. 在 Google Chrome 中安装扩展程序。

此处为直达连接 Chrome商店

2. 找到插件 ID

打开Chrome 插件管理 chrome://extensions/
找到它的扩展 ID，它是一个像fmkadmapgofadopljbjfkapdkoienihi的字符串，如下图：

3. 找出 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/
• 在 macOS 上，它是~/Library/Application Support/Google/Chrome/Default/Extensions

4. 配置扩展地址

主进程引入插件地址

// main.js
 const { app, session } = require('electron')
 const path = require('path')
 const os = require('os')

 // on macOS
 const reactDevToolsPath = path.join(
   os.homedir(),
   '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
 )

 app.whenReady().then(async () => {
   await session.defaultSession.loadExtension(reactDevToolsPath)
 })

---

总结

electron 引入开发者工具扩展有多种方式，总的来说是两大类：一类是npm包安装，另一类是指定扩展文件路径安装。根据自身项目情况选择安装即可。

如果你知道还有其他方式请贴出来大家一起学习学习……

相关文档地址：
electron-devtools-installer
devtools-extension