electron [Bug]:React开发工具在启动时无法附加到开发工具上,需要重新加载,

9jyewag0  于 5个月前  发布在  Electron
关注(0)|答案(9)|浏览(71)

预检清单

Electron 版本

29.1.4

您正在使用的操作系统是什么?

Windows

您正在使用的操作系统版本是什么?

Windows 11 Home 23H2

您正在使用的架构是什么?

x64

最后已知正常工作的 Electron 版本

  • 无响应*

预期行为

当我在开发者模式下启动我的 Electron 应用程序时,React Devtools 将被安装并附加到我的应用程序上。

实际行为

React Devtools 已安装,但未附加到我的应用程序上。需要手动重新加载或强制重新加载才能将其附加。如果我从 Chrome 扩展程序中手动安装 React Devtools,也必须手动重新加载。

测试用例 Gist URL

  • 无响应*

其他信息

我的代码:

// Import required modules
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
const path = require('path');
const { app, BrowserWindow } = require('electron');

// Initialize mainWindow variable
let mainWindow;

// Function to create the main window
const createWindow = async () => {
  const isDev = await import('electron-is-dev');

  // Configure the main window
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Enable Node.js integration
      enableRemoteModule: true, // Enable remote module
      contextIsolation: false, // Disable context isolation
      autoHideMenuBar: true, // Auto-hide menu bar
      devTools: isDev.default, // Show DevTools in development
    },
  });

  // Hide the menu bar
  mainWindow.setMenuBarVisibility(true);

  // Load the appropriate URL based on the environment
  mainWindow.loadURL(
    isDev.default
      ? 'http://localhost:3000' // Development URL
      : `file://${path.join(__dirname, '../build/index.html')}` // Production URL
  );
};

// Create the main window when the app is ready
app.whenReady().then(() => {
  installExtension(REACT_DEVELOPER_TOOLS,  { loadExtensionOptions: { allowFileAccess: true }})
      .then((name) => {
        console.log(`Added Extension: ${name}`);
        // Create the window and the React application
        createWindow();
      })
      .catch((err) => console.log('An error occurred: ', err));
});

// Quit the app when all windows are closed (except on macOS)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// Create a new window when the app is activated (macOS)
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

我还尝试在我的代码中重新加载窗口或添加一个定时器来重新加载窗口,但没有成功。

dm7nw8vv

dm7nw8vv1#

这段文本是关于数学的,但它看起来像是乱码。请提供更多信息或上下文,以便我们能够更好地理解您的问题并提供帮助。

dwthyt8l

dwthyt8l2#

SantiagoChiappe,你在主进程中遇到了类似的错误(在#37876(评论)中报告)吗?

[91044:0308/100700.690484:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[91044:0308/100700.690537:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

是的,只有在打开开发者工具时才会出现这个错误。当我使用“查看”->“重新加载”重新加载应用程序时,我还会遇到其他错误,但然后就像我之前提到的那样,react devtools会出现:

[1] [73616:0410/004950.275:ERROR:CONSOLE(1)] "uniqueContextId not found", source: devtools://devtools/bundled/core/sdk/sdk.js (1)
[1] [73616:0410/004950.275:ERROR:CONSOLE(1)] "Extension server error: Inspector protocol error: uniqueContextId not found", source: devtools://devtools/bundled/models/extensions/extensions.js (1)
[1] [73616:0410/004950.278:ERROR:CONSOLE(1)] "Received error with code E_PROTOCOLERROR while checking if react has loaded: "Inspector protocol error: %s"", source: chrome-extension://deachpobkibmlfmamelbofgimdagiiob/build/main.js (1)```
e5nqia27

e5nqia273#

遇到了相同的问题

z18hc3ub

z18hc3ub4#

相同的问题,但在使用Vue开发工具时出现了异常,即使在重新加载后也无法加载。尝试打开开发工具时出现相同的错误。

kiayqfof

kiayqfof5#

关于这个问题有任何更新吗?如何解决这个问题?

izj3ouym

izj3ouym6#

通过使用react-devtools包而不是安装chrome扩展来解决这个问题。

  1. 执行yarn add --dev react-devtools
  2. 在package.json中的脚本中添加"dev:react-devtools": "react-devtools"或类似内容
  3. <script src="http://localhost:8097"></script>添加到渲染器索引html文件的开发版本中
  4. 现在,当你执行yarn run dev:react-devtools时,它将启动react-devtools服务器,并使react devtools在应用程序窗口的devtools中可用。
xxhby3vn

xxhby3vn7#

通过使用react-devtools包而不是安装chrome扩展来解决这个问题。

  1. 执行yarn add --dev react-devtools
  2. 在package.json中的脚本中添加"dev:react-devtools": "react-devtools"或类似内容
  3. <script src="http://localhost:8097"></script>添加到渲染器索引html文件的开发版本中
  4. 现在,当你执行yarn run dev:react-devtools时,它将启动react-devtools服务器,并使react devtools在应用程序窗口的devtools中可用。
    在我的项目上可以正常工作。谢谢。
li9yvcax

li9yvcax8#

@codebytere 你告诉我你无法复现这个问题。这里有一个示例仓库(使用Webpack开发服务器),它对我来说是可靠的:  [https://github.com/nikwen/electron-devtools-bug-repro](https://github.com/nikwen/electron-devtools-bug-repro)
重现步骤:
1. `npm start`
1. 打开开发者工具
1. React开发者工具不可见
1. 重新加载页面
1. React开发者工具变得可见
这里有一个视频展示了重现过程:  [https://www.loom.com/share/a1e68289b4594559b01e104c4173f0d0](https://www.loom.com/share/a1e68289b4594559b01e104c4173f0d0)
据我所知,这在Electron v28中有效,但在Electron v29中失效了。
iyr7buue

iyr7buue9#

经过一些痛苦的建设和构建了大约20个不同的开发工具版本,我确定facebook/react@f718199在初始加载时破坏了它。目前还不确定原因,但现在有一个很好的线索。

相关问题