Javascript 电子公司；React DevTools:“；扩展服务器错误：操作失败：http://localhost:3000/ 没有执行上下文“；，资料来源：devtools：//

我的React+Electron.js应用程序使用2个DevTools扩展（React Developer Tools&Redux DevTools），当应用程序在开发环境中启动时，使用

Electron DevTools安装程序

包安装。包裹1.X用于捆绑应用程序并提供热重新加载

首次使用

纱线开始

运行时，不会出现错误，运行应用程序时会看到以下输出：

(node:60573) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 bundled listeners added to [Bundler]. Use emitter.setMaxListeners() to increase limit
[0] (Use `node --trace-warnings ...` to show where the warning was created)
[0] ✨  Built in 6.67s.
[1] (electron) The default value of app.allowRendererProcessReuse is deprecated, it is currently "false".  It will change to be "true" in Electron 9.  For more information please check https://github.com/electron/electron/issues/18397
[1] Added Extension:  React Developer Tools
[1] Added Extension:  Redux DevTools

如果我们转到ChromeDevTools中的

组件
选项卡，我们会看到React开发者工具按预期工作


但是，在应用程序热加载检测到代码更改后，我们开始看到错误：

[1] [60597:0519/005808.141307:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.142973:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.143059:ERROR:CONSOLE(131)] "Extension server error: Operation failed: http://localhost:3000/ has no execution context", source: devtools://devtools/bundled/extensions/ExtensionServer.js (131)
[1] [60597:0519/005808.146899:ERROR:CONSOLE(40)] "[object Object]", source: chrome-extension://react-developer-tools/build/main.js (40)

如果我们转到Chrome DevTools中的
组件
选项卡，我们现在会看到一个空屏幕


问题：这里的错误可能是由什么引起的



electron@8.3.0
电子仪器-installer@3.0.0
react@16.13.1
redux@4.0.5
包裹-bundler@1.12.4
节点v14.2.0
MacOSXCatalina 10.15.3

electron.js

const electron = require("electron");
const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

const path = require("path");
const isDev = require("electron-is-dev");


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 {
      const name = await installExtension(extension);
      console.log(`Added Extension:  ${name}`);
    } catch (e) {
      console.log('An error occurred: ', err);
    }
  }
}

function createWindow() {
  const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
  mainWindow = new BrowserWindow({
    width: Math.round(width),
    height: Math.round(heigh),
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      preload: __dirname + '/preload.js'
    }
  });

  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) {
    // Install extensions
    await installExtensions();

    // Auto-open dev tools
    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();
  }
});

async function installExtensions() {
  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))
  ).catch(err => console.log(err));
}

export { installExtensions };

我不得不处理同样的问题，我很长一段时间都找不到办法

为解决这个问题，我添加了一个回调函数，用于
did frame finish load
。所以在我的例子中，它看起来是这样的：

app.on('ready', () => {
  const mainWindow = createMainWindow(__dirname);

  mainWindow.webContents.on("did-frame-finish-load", async () => {
    if (process.env.NODE_ENV === 'development') {
      await installExtensions();
    }
  });
  // Receiver(ipcMain) Module
  receiver();

  // Updater Module
  updater(mainWindow);
});

installexextensions.js

const electron = require("electron");
const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

const path = require("path");
const isDev = require("electron-is-dev");


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 {
      const name = await installExtension(extension);
      console.log(`Added Extension:  ${name}`);
    } catch (e) {
      console.log('An error occurred: ', err);
    }
  }
}

function createWindow() {
  const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
  mainWindow = new BrowserWindow({
    width: Math.round(width),
    height: Math.round(heigh),
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      preload: __dirname + '/preload.js'
    }
  });

  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) {
    // Install extensions
    await installExtensions();

    // Auto-open dev tools
    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();
  }
});

async function installExtensions() {
  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))
  ).catch(err => console.log(err));
}

export { installExtensions };

我认为这个解决方案也适用于您的场景。
如果有人遇到同样的问题，并且出现了另一个问题，比如当您第一次运行应用程序时，它会显示一个空白屏幕，没有页面，只有主组件可以修复，只需使用
HashRouter
更改您的
浏览器路由器。我遇到了这两个问题，但在更改后，它得到了修复
太棒了，这对我来说非常有效，谢谢先生：）