React devtools not working as described in docs

[johnthedebs]

Summary

I'm trying to use react-devtools with atom-shell as described here in the docs, but the React tab doesn't show up in the Developer Tools panel as expected.

I put the line require("remote").require("browser-window").addDevToolsExtension("../react-devtools"); in the html file being loaded into the browser window which gives no console output, but does give a file not found error if I switch to an incorrect path.

I've also tried entering the line manually from the Developer Tools console, in which case it returns the string "React Developer Tools" but doesn't appear to do anything else.

Versions

atom-shell 0.19.5
react: 0.12
react-devtools: 0.12

[lllama]

I'm seeing similar results (as noted in #250, though this issue is more specific). Unloading the extension 'works' (i.e. returns true) but nothing shows up when loading.

[jgarcia241]

Same here. Is there any known workaround we can use while this is closed?

[deepak1556]

React v0.12 has deprecated React.__internals https://github.com/facebook/react/releases/tag/v0.12.0 . So loading of the extension's devtools_page by atom-shell will fail at this condition https://github.com/facebook/react-devtools/blob/master/injected/ReactHost.js#L42 which is initialised by a globalhook contentscript https://github.com/facebook/react-devtools/blob/master/injected/GlobalHook.js . I tried adding the contentscript to main.html https://github.com/deepak1556/react-devtools/blob/atom_shell_test/main.html#L4 and extension loaded successfully. Except the treeview wasnt constructed..

[zcbenz]

@deepak1556 Thanks for looking into this, I think we have to support the content_scripts to load latest react devtools extension.

[dlmanning]

Is this on the roadmap?

[steelbrain]

Bump.

[LongLiveCHIEF]

It seems all the issues regarding this issue reference each other and then close. It's the infinite issue of doom.

[bruce]

Also, this is a wider issue; it's also a problem with the Ember Inspector, as noted in (merged) #1644.

[mrzmyr]

Anything happend on this ?

[faurehu]

I'm calling the same line indicated in the docs:
require("remote").require("browser-window").addDevToolsExtension("../react-devtools");

It throws the following error:
Error: ENOENT: no such file or directory, open '../react-devtools/manifest.json'

This seems to be because it keeps looking for a manifest.json file. The devtools doesn't need to provide this because it's not really a CRX package.

I'm on Electron v0.31.1, React v0.13.3 and react-devtool 0.13.1

[swashcap]

👍

[swashcap]

If you install React Devtools in ./devtools/react-devtools and then run:

require('remote').require('browser-window').addDevToolsExtension('./devtools/react-devtools/shells/chrome');

…it finds the manifest.json file. The docs should be updated. However, the dev tools don’t appear to load.

😔

[dlmanning]

Anyone checked to see if React's beta dev tools work? I'll test them tomorrow if no one else gets a chance.

[faurehu]

I directed it to the manifest.json file and it printed "New React Developer Tools". The tools are not there so it's an issue similar to yours.

[dlmanning]

Yep, no luck loading the beta dev tools either

[etiktin]

@deepak1556, @zcbenz it seems that pretty much all framework extensions (AngularJS Batarang, React Developer Tools and Ember Inspector) aren't working. They all have content_scripts in their manifest.json.
Can you explain what is needed in order to add support for them, maybe some of us can help solve this?

[dlmanning]

ditto, would be happy to help if someone could just point out the direction.

[zcbenz]

@etiktin The extensions are handled under atom/browser/lib/chrome-extension.coffee, we need to read the content_scripts and apply them in the renderer.

But only supporting content_scripts is probably not enough, latest react-devtools is also using chrome.runtime.connect and other Chrome APIs to communicate with the content scripts.

[jprichardson]

I wish I had seen this issue before I went down the rabbit hole (React dev tools) for a couple of hours. Would you be willing to at least update the documentation reflecting that this does not work as expected just yet? Thank you.

[kevinsimper]

@jprichardson I added the note here #3313

[dperetti]

There is hope : it looks like the future for being able to use React devtools with Electron is here .

[sunjay]

+1

[jsnar]

NW.js has support for devtool extension for months. Recently React devtools is supported too: http://nwjs.io/blog/v0.13.0-beta7/
I believe they have better Chrome features support and newest Chromium version.

[vladfr]

@dperetti have you tried the pure html version, does it work?

[dperetti]

I didn't have time to try in Electron but I'm 100% sure it can work since I've been able to run their example in... Safari.
Their example uses an iframe though. That prevented me to be able to get it to work easily in my current project.
I think ideally, one should open the pure html dev tools in a different Electron window, which would communicate then with the other windows in a more "Electron" way.

[steve10287]

Any update on this? I cannot get this to work:

require('remote').require('browser-window').addDevToolsExtension('./react-devtools/shells/chrome')

[vladfr]

I've been trying to get this to work with electron with no luck. I can get the above command to work, but the React tab doesn't show up. I've tried to start from the example in /shells/plain/ but to no avail, it's so contrived that I can't understand it. Anyone has any insight?

[xhocquet]

Read up, there were breaking changes in React that have not been resolved. Also waiting for this, running into some nasty React bugs and I can't find out what listeners are on my modules!

[inklesspen]

I spent some time poking around with this today, and after much effort, figured out how to manually add the content_script from the react devtools to my app. this permitted the react devtools to detect React in my app, but trying to connect to it failed because chrome.runtime.getURL and chrome.runtime.connect are not implemented. (Just for completeness' sake, I note that react devtools also use chrome.runtime.onConnect and chrome.tabs.executeScript.)

[frankhale]

Not sure if this is widely known or not but there seems to be a fork of the React Devtools that does work with Electron.

https://github.com/firejune/electron-react-devtools
https://www.npmjs.com/package/electron-react-devtools

[davej]

@frankhale Awesome, were you able to get it working? It didn't work for me.

[frankhale]

I haven't tried it yet but definitely will either today or in the next few days.

[albertoclarit]

Not working for me...

[philostler]

Gave it a try earlier. Didn't work for me neither

[davej]

@albertoclarit @philostler Created issue here: firejune/electron-react-devtools#1

[philostler]

I see this is fixed in the latest Electron release. Has anyone else tested and got this working? I can get React DevTools loaded in but I just get "Connecting to React..." 😞

[inklesspen]

@philostler When I use https://github.com/chentsulin/electron-react-boilerplate (and update the package.json to use electron 1.2.1), I can get the React Devtools working by following the instructions.

[philostler]

@inklesspen Thanks, confirmed also, but still not working in my own app. NP must be another issue

[albertoclarit]

Electron 1.2.1 React DevTools is now working on my App...

[bachmay]

AngularJS Batarang is still not working

[mnquintana]

@bachmay Please open a new issue – this issue is only for the React dev tools not working. Thanks!