electron-devtools-installer

一个用于在 Electron 应用程序中安装开发者工具扩展的工具

介绍

electron-devtools-installer 是一个简化在 Electron 应用中安装各种浏览器开发者工具扩展的工具包。它支持自动下载和安装常用的开发工具，如 Vue DevTools、React DevTools、Redux DevTools 等，使开发者能够在 Electron 应用中使用与浏览器相同的调试工具。

安装

bash

# 使用 npm
npm install --save-dev electron-devtools-installer

# 使用 yarn
yarn add --dev electron-devtools-installer

# 使用 pnpm
pnpm add -D electron-devtools-installer

基础配置

主进程配置

在 Electron 的主进程中配置开发者工具扩展：

import { app, BrowserWindow } from 'electron'
import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS, VUEJS_DEVTOOLS } from 'electron-devtools-installer'

/**
 * 在应用准备就绪后安装开发者工具扩展
 * 仅在开发环境下安装扩展，生产环境不需要
 */
app.whenReady().then(async () => {
  // 安装开发者工具扩展
  if (process.env.NODE_ENV === 'development') {
    try {
      // 安装 Vue Devtools
      // 用于调试 Vue 应用的状态、组件层次结构等
      await installExtension(VUEJS_DEVTOOLS)

      // 安装 React Devtools
      // 用于调试 React 组件树、props、state 等
      await installExtension(REACT_DEVELOPER_TOOLS)

      // 安装 Redux Devtools
      // 用于调试 Redux 状态管理、action 历史等
      await installExtension(REDUX_DEVTOOLS)

      console.log('已成功安装开发者工具扩展')
    } catch (e) {
      console.error('安装开发者工具扩展失败:', e)
    }
  }

  // 创建窗口
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 670,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })
})

使用示例

安装自定义扩展

通过 Chrome 网上应用店 ID 安装自定义扩展：

import installExtension from 'electron-devtools-installer'

/**
 * 通过 Chrome 网上应用店 ID 安装扩展
 * @param extensionId Chrome 扩展的唯一标识符
 * @returns 安装成功后返回扩展名称
 */
const installCustomExtension = async (extensionId) => {
  // React Devtools ID
  const extensionId = 'fmkadmapgofadopljbjfkapdkoienihi'

  try {
    // 安装扩展并获取扩展名称
    const name = await installExtension(extensionId)
    console.log(`已成功安装扩展: ${name}`)
    return name
  } catch (err) {
    console.log('安装扩展失败:', err)
    throw err
  }
}

app.whenReady().then(async () => {
  await installCustomExtension()
})

批量安装扩展

同时安装多个开发者工具扩展：

import installExtension, {
  REACT_DEVELOPER_TOOLS,
  REDUX_DEVTOOLS,
  VUEJS_DEVTOOLS,
  APOLLO_DEVELOPER_TOOLS,
} from 'electron-devtools-installer'

/**
 * 批量安装多个开发者工具扩展
 * @returns 安装成功的扩展名称数组
 */
const installMultipleExtensions = async () => {
  // 定义需要安装的扩展列表
  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS, VUEJS_DEVTOOLS, APOLLO_DEVELOPER_TOOLS]

  try {
    // 批量安装多个扩展
    const results = await Promise.all(extensions.map((ext) => installExtension(ext)))
    console.log('已安装的扩展:', results)
    return results
  } catch (err) {
    console.error('安装扩展失败:', err)
    throw err
  }
}

app.whenReady().then(async () => {
  await installMultipleExtensions()
})

高级配置

使用高级选项配置扩展安装：

import { app } from 'electron'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'

/**
 * 使用高级选项安装开发者工具扩展
 * @param extensionReference 扩展引用或ID
 * @param options 安装选项
 */
const installWithAdvancedOptions = async (extensionReference, options = {}) => {
  try {
    // 使用高级配置选项安装扩展
    const result = await installExtension(VUEJS_DEVTOOLS, {
      // 加载本地扩展的选项
      loadExtensionOptions: {
        // 允许扩展访问本地文件
        allowFileAccess: true,
      },
      // 是否强制重新下载扩展，即使已经安装
      forceDownload: false,
      // 指定安装特定版本的扩展
      version: '6.0.0',
      // 自定义扩展下载地址，用于内网环境或自定义源
      baseUrl: 'https://your-custom-url.com/extensions/',
      ...options,
    })
    console.log('已安装扩展:', result)
    return result
  } catch (err) {
    console.error('安装扩展失败:', err)
    throw err
  }
}

app.whenReady().then(async () => {
  await installWithAdvancedOptions(VUEJS_DEVTOOLS)
})

常见问题

扩展安装失败

如果扩展安装失败，可能的原因包括：

网络连接问题 - 确保您的应用可以访问互联网
版本不兼容 - 检查扩展版本与您的 Electron 版本是否兼容
权限问题 - 确保应用有足够的权限下载和安装扩展

生产环境配置

在生产环境中，通常不需要安装开发者工具扩展。确保使用环境变量或配置文件来区分开发和生产环境：

if (process.env.NODE_ENV === 'development') {
  // 仅在开发环境安装扩展
  await installExtension(VUEJS_DEVTOOLS)
}

electron-devtools-installer ​

介绍 ​

安装 ​

基础配置 ​

主进程配置 ​

使用示例 ​

安装自定义扩展 ​

批量安装扩展 ​

高级配置 ​

常见问题 ​

扩展安装失败 ​

生产环境配置 ​

参考资源 ​