如何在 Electron 中使用 Redux 开发工具？

Question

因此 Redux 选项卡已添加到 Chome 开发工具中，但是当我单击该选项卡时，它会显示消息 No store found. Make sure to follow the instructions.。我还控制台记录了我的state 对象以检查我的商店是否为空，但不是。我使用的是 Electron 版本 12.0.4，我的操作系统是 Arch Linux。

这是我的 main.js 文件中的代码块：

const { app, BrowserWindow, Notification, ipcMain } = require('electron'),
  path = require('path'),
  os = require('os');
const isDev = !app.isPackaged;

const installExtensions = async () => {
  const installer = require('electron-devtools-installer');
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];

  return Promise.all(
    extensions.map(name => installer.default(installer[name], forceDownload))
  )
    .then(name => console.log(`Added Extension: ${name}`))
    .catch(err => console.log('An error occurred: ', err));
};

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      worldSafeExecuteJavaScript: true,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile('index.html');
  isDev && win.webContents.openDevTools();

  win.on('close', () => {
    win = null;
  });
}

if (isDev) {
  require('electron-reload')(__dirname, {
    Electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
  });
}

app.whenReady().then(async () => {
  await installExtensions(); // devtools extensions

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

Answer 1

试试这个。 技巧我相信你需要在你的 DOM 准备好之后安装并打开（如果你愿意）开发工具，否则你会在你的控制台窗口。

电子 v12.0.5
电子开发工具安装程序 v3.2.0

const {
    app,
    BrowserWindow,
} = require("electron");
const {
    default: installExtension,
    REDUX_DEVTOOLS,
    REACT_DEVELOPER_TOOLS
} = require("electron-devtools-installer");
const isDev = process.env.NODE_ENV === "development";

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

    // Create the browser window.
    win = new BrowserWindow({
        width: 800,
        height: 600,
        title: "MyAppTitle",
        webPreferences: {
            devTools: isDev
        }
    });

    // Load app
    win.loadURL("index.html");

    // Only do these things when in development
    if (isDev) {

        // Errors are thrown if the dev tools are opened
        // before the DOM is ready
        win.webContents.once("dom-ready", async () => {
            await installExtension([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS])
                .then((name) => console.log(`Added Extension:  ${name}`))
                .catch((err) => console.log("An error occurred: ", err))
                .finally(() => {
                    win.webContents.openDevTools();
                });
        });
    }

    // Emitted when the window is closed.
    win.on("closed", () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
        createWindow();
    }
});