[SOLVED] Unable to load React DevTools in a <webview />


#1

I am currently using electron-devtools-installer to install the React DevTools. Both my host browser windows devtools and the webviews devtools have a react tab. The react tab loads fine in the browser window devtools. However in the webview devtools I get the Connecting to React... page.

I can’t find a way to open the devtools for the webview devtools, otherwise I would try debugging the issue myself. My guess is that React DevTools can’t establish the hook it needs to communicate with react, but I have no way of knowing for sure. If someone knows how to open up the devtools for a devtools in electron that would be very useful to know. (You can do this in Chrome currently with a detached devtools)

I have made sure that the webview has nodeintegration set to true, and I also tried to do webFrame.registerURLSchemeAsBypassingCSP("chrome-extension://") just in case it was a CSP issue. No matter what I do the extension doesn’t load properly for the webview devtools.

electron-devtools-installer: 2.2.0
electron: 1.4.16
react: 15.4.2

Let me know if you require any additional information. Thanks


#2

Apparently you can debug electron by using the --remote-debugging-port argument. React DevTools is throwing an error that says failed to connect. It looks like it is this line of the source: https://github.com/facebook/react-devtools/blob/46e0446e721c2974452bf17be84c49fb00ee7c5c/frontend/Store.js#L516

I will try to put together a reproduction of the issue using a boilerplate and see if anyone else can help.


#3

I got this working by doing this.webview.setAttribute("disablewebsecurity", true), I don’t think that should be necessary, but it does work.


#4

So the above fix is a bit drastic, this works and is not as exposing.
webFrame.registerURLSchemeAsSecure('chrome-extension');