Electron搭配Svelte开发时Svelte DevTools无法检测应用问题求助

1. 调整扩展安装时机，确保异步操作完成后再加载页面 #

你当前的installExtension是异步方法，未等待执行完成就加载Svelte页面会导致扩展注入晚于Svelte代码执行，无法检测到实例，调整代码逻辑如下：

const { app, BrowserWindow, session } = require('electron')
const { default: installExtension } = require('electron-devtools-installer')

const SVELTE_DEVTOOLS_ID = 'ckolcbmkjpjmangdbmnkpjigpkddpogn'

async function createWindow() {
  // 开发环境先完成扩展安装再创建窗口
  if (process.env.NODE_ENV === 'development') {
    try {
      const extensionName = await installExtension(SVELTE_DEVTOOLS_ID, {
        // 允许扩展访问本地文件资源
        loadExtensionOptions: { allowFileAccess: true },
        // 可选：强制重新下载扩展，清除旧缓存
        forceDownload: process.env.CLEAR_EXTENSION_CACHE === 'true'
      })
      console.log(`Added Extension: ${extensionName}`)
    } catch (err) {
      console.log('扩展安装失败：', err)
    }
  }

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

  // 开发环境加载本地开发服务地址，生产环境加载打包文件
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173') // 替换为你的Svelte开发服务地址
  } else {
    mainWindow.loadFile('dist/index.html')
  }
}

app.whenReady().then(createWindow)

2. 确认Svelte开发配置正确 #

如果使用Vite作为构建工具，需要确保Svelte插件在开发模式下开启dev支持，避免dev调试代码被剔除：

// vite.config.js
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig(({ mode }) => ({
  plugins: [
    svelte({
      // 开发模式强制开启dev支持
      dev: mode === 'development'
    })
  ]
}))

你可以打开开发者工具控制台输入window.__svelte_dev__验证：如果返回undefined说明Svelte dev模式未开启，返回对象则说明Svelte配置正常，问题出在扩展注入。

3. 备用方案：本地加载扩展 #

如果在线安装的扩展存在兼容性问题，可手动下载扩展本地加载：

• 在Chrome浏览器中安装Svelte DevTools，打开chrome://extensions/开启开发者模式
• 找到Svelte DevTools，点击「打包扩展」，将解压后的扩展文件夹保存到本地项目目录
• 替换安装逻辑为本地加载：

await session.defaultSession.loadExtension('本地扩展文件夹的绝对路径', {
  allowFileAccess: true
})

内容的提问来源于stack exchange，提问作者onad konrad