-
Notifications
You must be signed in to change notification settings - Fork 136
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Doesn't Work For React Dev Tools #195
Comments
Same issue here. Log says the react dev tools is installed but it does not show up in the chrome dev tools. It does work for redux dev tools though |
For those still struggling with this issue, here is how I just solved it ... Dependencies : In your main process const extensionOptions = {
forceDownload: false, // not sure about this one, i've read somewhere that it could cause issues when set to true ?
// Important setting allowFileAccess, make sure your electron version > 11.3.0 contains this PR contents :
// https://github.com/electron/electron/pull/25198
loadExtensionOptions: { allowFileAccess: true }
} as const;
async function installElectronDevToolExtensions(): Promise<void> {
if (process.env.NODE_ENV !== 'production') {
try {
await installExtensions([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS], extensionOptions);
console.info(`[INFO] Successfully added devtools extensions`);
} catch (err) {
console.warn('[WARN] An error occurred while trying to add devtools extensions:\n', err);
}
}
}
app.on('ready', async () => {
mainWindow = new BrowserWindow({...});
// This must be done BEFORE the page is loaded (maybe this can be moved to a sort of did-load hook ?)
await installElectronDevToolExtensions();
// Load page (to be adapted of course) :
if (process.env.NODE_ENV !== 'production') {
mainWindow.loadURL(`http://localhost:8888`);
} else {
mainWindow.loadURL(
formatURL({
protocol: 'file:',
pathname: join(__dirname, 'index.html'),
slashes: true
})
);
}
mainWindow.webContents.on('did-finish-load', async () => {
mainWindow.maximize();
mainWindow.show();
mainWindow.focus();
});
// The other important bits are here, this is the ONLY thing
// that made the react-related devtools work in my case:
// Waiting that the dom is ready to open the the devtools
// (Otherwise I had to reload (CTRL+R) the page for the React-related extension to be shown in devtools.)
if (process.env.NODE_ENV !== 'production') {
mainWindow.webContents.once('dom-ready', () => {
mainWindow.webContents.once('devtools-opened', () => {
mainWindow.focus();
});
mainWindow.webContents.openDevTools();
});
}
}); Hope that helps ! |
I can confirm that adding loadExtensionOptions helps. |
@oleg-slapdash's fix only works in the unpackaged app, at least for us. Our packaged app (which uses Considering the profiler is meant to be run in a production build, that seems a significant issue. |
This is still an issue with this extension and the React Dev Tools. I'm getting a bunch of errors in the console when running my app and it's unlikely to be some other code as I'm just getting this going. This is an example of the errors that I'm currently seeing:
|
Yeah this is still broken |
Works fine for me in dev. Useless in production. |
2024 and doesn't appear for me either... even with
(installed from |
@erickzhao @MarshallOfSound @codebytere is there any hope for this? Since it is included in the official docs it should really be fixed. |
I have been able to use this to install Redux and jQuery Selector Inspector, however I can not get it to work for React DevTools following your instructions. There is no error logged and in fact the console.log stating that it has been installed runs.
My code:
The text was updated successfully, but these errors were encountered: