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

Question

因此，Redux 选项卡已添加到 Chome devtools，但当我单击该选项卡时，它会显示消息 No store found. Make sure to follow the instructions.。我还 console.logged 我的 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 准备就绪后否则你会在你的控制台中看到乱七八糟的错误 window.

电子 v12.0.5
electron-devtools-installer 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();
    }
});

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

How do I use Redux Dev Tools in Electron?

electron