我有一个新的电子锻造项目使用:
- React(17.0.2)
- React开发工具(4.27.2- 1a 88 fbb 67)
- React-还原(7.2.9)
- 电子(23.1.1)
- 电子开发工具安装程序(3.2.0)
- @电子伪造/cli(6.0.5)
尽管电子主进程已将React开发工具正确安装到我的电子userPath
中,但它似乎无法连接到在电子渲染器进程中设置的React示例。
// main.js
const { app, session, BrowserWindow } = require('electron')
import {
enable as enableElectronRemote,
initialize as initializeElectronRemote,
} from '@electron/remote/main'
import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer'
const addDevTools = async () => {
await installExtension(REACT_DEVELOPER_TOOLS, { loadExtensionOptions: { allowFileAccess: true }})
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log('An error occurred: ', err));
await installExtension(REDUX_DEVTOOLS)
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log('An error occurred: ', err));
}
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
nodeIntegration: true,
contextIsolation: false,
},
});
enableElectronRemote(mainWindow.webContents);
// and load the index.html of the app.
mainWindow.loadURL(`${MAIN_WINDOW_WEBPACK_ENTRY}`);
addDevTools()
.then(() => {
if (process.env.NODE_ENV === 'development') {
// Open the DevTools.
mainWindow.webContents.on('did-frame-finish-load', () => {
mainWindow.webContents.openDevTools();
})
}
})
Redux开发工具连接到Redux示例,状态非常好,但React开发工具只显示以下消息:
Loading React Element Tree...
If this seems stuck, please follow the troubleshooting instructions.
我的电子 Boot 的控制台输出显示React Dev Tools添加得很好:
Added Extension: React Developer Tools
(node:312) ExtensionLoadWarning: Warnings loading extension at /home/jack/.config/electron/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd:
Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.
Permission 'notifications' is unknown or URL pattern is malformed.
Permission 'contextMenus' is unknown or URL pattern is malformed.
<div id="root">
在文档中设置得很好,但似乎React开发工具似乎无法找到此问题。我已经查看了电子、电子锻造和React问题,但无法找到任何似乎有此问题的内容。
我有一个网络版本的这个应用程序,它的工作只是罚款与React开发工具,所以我相信,这是一个问题,与电子和React方面的事情。
我尝试手动导入React Dev Tools,而不是使用electron-devtools-installer
,这导致了与上面相同的问题。
React Developer Tools应该像在Web浏览器中一样加载并显示所有组件树,但是它只呈现错误消息Loading React Element Tree...
,而不会显示任何类型的错误消息。
1条答案
按热度按时间wqnecbli1#
实际上是兼容性的问题,目前版本的React开发者工具(4.27)使用了Electron不支持的API。您需要将devtools的版本降级到4.25。
这里是the related issue on GitHub,您可以使用评论中提供的解决方案之一。