背景

Electron 本身支持Chrome DevTools拓展，但在做vue相关开发，vue-devtools调试更方便

方法

Electron官方文档提供了React Developer Tools示例，参考步骤使用即可。

使用

1. 提前安装vue devtools，在谷歌浏览器chrome://extensions/找到拓展

2. 点击详情找到扩展ID

3. 找到chrome扩展程序存放目录

我使用window11路径为:

C:\Users\%账户名%\AppData\Local\Google\Chrome\User Data\Default\Extensions

4. 找到刚刚找到的拓展ID目录

5. 复制拓展包到工程根目录的extension目录下

6. 在主进程main.ts增加

import path from 'path'

const vueDevToolsPath = path.resolve(__dirname, '../../extension/vue-devtools')

app.whenReady().then(async () => {
  if (process.env.NODE_ENV === 'development') {
    await session.defaultSession.loadExtension(vueDevToolsPath)
  }
  // createWindow()
}

7. 启动项目，引入成功