Electron 9中如何用session替代废弃API正确安装开发者工具？

AI 小北

2026-5-7

嘿，这个问题我刚解决不久！Electron 9确实把BrowserWindow.addDevToolsExtension和getDevToolsExtensions这俩旧API给废弃了，官方要求改用session相关的方法来管理DevTools扩展。好在electron-devtools-installer已经适配了新的API，只要调整一下代码细节就能搞定，我来给你一步步说：

首先，第一步要确保你的electron-devtools-installer是最新版本，旧版本还在调用废弃的API，所以先执行升级：

npm install electron-devtools-installer@latest

然后，修改你的代码，主要是这几个关键点：

从Electron中引入session对象，用来管理扩展
调整installExtension的返回值处理（现在返回的是扩展信息对象，不是字符串名称）
用session.getAllExtensions()替代旧的getDevToolsExtensions
修正代码里的一个小错误（catch块里的变量名不匹配）

下面是修改后的完整代码，我标了关键变化：

const electron = require("electron");
const app = electron.app;
const path = require("path");
const isDev = require("electron-is-dev");
// 新增：从electron中解构出session
const { BrowserWindow, session } = electron; 
let mainWindow;

const installExtensions = async () => {
  const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');
  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
  
  for (const extension of extensions) {
    try {
      // 现在installExtension返回的是扩展信息对象，不是字符串
      const extensionInfo = await installExtension(extension);
      console.log(`Added Extension: ${extensionInfo.name}`); 
    } catch (err) { 
      // 修正：原来的catch参数是e，但console里用了err，现在统一成err
      console.log('An error occurred: ', err);
    }
  }

  // 替代旧的BrowserWindow.getDevToolsExtensions()
  const installedExtensions = session.defaultSession.getAllExtensions();
  console.log('All installed extensions:', installedExtensions.map(ext => ext.name));
}

// 你的createWindow函数，这里补充了webPreferences的常见配置（根据你的需求调整）
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Electron 9默认是false，如果你的应用需要Node集成就开启
      contextIsolation: false // 配合nodeIntegration使用，新版建议用preload脚本替代
    }
  });

  mainWindow.loadURL(isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html")}`);

  mainWindow.on("closed", () => (mainWindow = null));
}

app.on("ready", async () => {
  createWindow();
  if (isDev) {
    await installExtensions();
    mainWindow.webContents.on("did-frame-finish-load", () => {
      mainWindow.webContents.once("devtools-opened", () => {
        mainWindow.focus();
      });
      mainWindow.webContents.openDevTools({ mode: 'undocked' });
    });
  }
});

// 补充完整的应用生命周期事件（如果你的代码里有就保留，没有可以加上）
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

再给你解释下核心变化：

session对象的使用：Electron 9开始，所有扩展管理都通过session来做，默认用session.defaultSession就能全局加载扩展；如果只想给特定窗口加载，就用mainWindow.webContents.session。
installExtension的返回值：旧版本返回的是扩展名称字符串，新版本返回的是包含name、id等信息的对象，所以日志里要取extensionInfo.name，解决你看到的[object Object]问题。
废弃API替代：session.getAllExtensions()完全替代了旧的BrowserWindow.getDevToolsExtensions()，返回的是已安装扩展的数组，你可以按需处理这些信息。

最后提个小注意点：如果你的应用后续升级到Electron 12+，默认会开启contextIsolation，这时候建议用preload脚本处理Node相关逻辑，不过electron-devtools-installer已经适配了这个情况，不用额外担心扩展加载的问题。

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