React-devtools: [React Native] Devtools can't find React within the Web Worker (help wanted)

[ide]

Update from Maintainers: DevTools works with React Native again! Follow these instructions: http://facebook.github.io/react-native/docs/debugging.html#react-developer-tools

React Native now runs within a Web Worker on Chrome so that it gets a more pure and isolated JS environment that more closely mimics JSC on the device but this breaks the React devtools. @skevy pointed this out and I didn't see a task open yet. The fix might need to happen on the RN side but I figured that people thinking about the devtools are more likely to have a solution come to mind.

Repro: Run an app with RN master, run it in the Chrome debugger, try to use React devtools but "React" option doesn't show in the Web Inspector.

[sophiebits]

I don't know how to fix this. I now remember that this is why we didn't merge that RN pull request originally.

[jaredly]

There's a way to do it, but I imagine it will slow things down more. I'll
investigate

On 4:41PM, Sat, Sep 26, 2015 Ben Alpert [e-mail] wrote:

I don't know how to fix this. I now remember that this is why we didn't
merge that RN pull request originally.

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-devtools/issues/229#issuecomment-143502270
.

[sebmarkbage]

@jaredly Why would it slow things down? It is already an async bridge and potentially we could communicate directly from the Worker to the Dev Tools. It'd be good to have multiple host support for multiple Workers and iframes regardless.

[jaredly]

Multiple hosts is a good point.
It would slow things down b/c it's yet another hoop to jump through. I'll go ahead an implement it and we'll see.

[jaredly]

:/ looks like there's no way to go from webworker to devtools from the apis. You can eval in an iframe's context, but not in a worker. Looks like we'll have to route everything through the main page's context.

[ksheedlo]

This needs to be fixed. @jaredly have you made any progress?

[sulliwane]

Is it related to my problem: the react tab won't show up in Chrome with RN 0.12? (for an RN app running in the simulator, and websocket connection well established)

[ide]

Yes, the devtools currently do not work with RN.

[tomkur]

:+1:

[yrokhlin]

+1 to this, it's quiet possibly the most annoying thing ever.

[rreusser]

This sounds like also perhaps the reason window is now inaccessible in the console. I know that's a dirty, ugly way to debug, but it was really convenient. +1 for optional, but I know there are certainly more relevant things going on here.

[mschipperheyn]

It's pretty major. Wouldn't it make sense to roll the chrome debugging related changes back and reimplement when the overall issue is fixed?

[ide]

@jaredly are you actively looking into this? Or if not can you add a Help Wanted label so someone who wants this feature can submit a PR?

[mschipperheyn]

Nope. Even though it's impacting my productivity, I haven't got a clue how this aspect works. So, it's not likely I will jump into this.

[jaredly]

I haven't gotten it running w/ the chrome extension yet, but I've been putting this app together for debugging things like embedded WebViews and electron-based apps -- it's an independent app that talks to react via a websocket. I believe it would be fairly simple to do the same thing from a WebWorker.
[that app also works w/ React Native when you aren't debugging in chrome]

[skevy]

@jaredly this is great work. How's the speed on the web socket stuff? Acceptable? (I'd imagine it's fine)

[ide]

@jaredly fantastic! that's really cool.

[jaredly]

@skevy yeah speed hasn't been an issue from what I've seen

[skevy]

Awesome. I'm checking this out tonight.

[evansolomon]

I got the electron app running (had to manually install yargs btw) but can't get it to connect to my React Native app. I've tried all the combinations I can think of between using Chrome/not, refreshing the app, restarting the packager, etc. But I am still stuck on the "Waiting for a connection from React Native" screen. Any thoughts?

I'm running React Native 0.12.

[jaredly]

@evansolomon ok I just checked it out, and it looks like there was a missing piece. Just make a PR, but it's a one line fix if you want to do it manually https://github.com/facebook/react-native/pull/3431

[gre]

Maybe that was a bad habit, but, in dev mode, I was used to expose React.addons.Perf in window.Perf so I can easily benchmark something from the Chrome Console.
This is broken since RN 0.11, I guess also related to this bug.
It would be neat if start() and stop() could be buttons in the devtools

[despairblue]

@rreusser @gre you can access it from the console if you choose the web worker's context:

Took me a while to figure this out.

[gre]

@despairblue great! thanks

[rreusser]

@despairblue Didn't know that was a thing, but works perfectly. Greatly appreciated!

[jaredly]

@gre there's an issue out for that already: #71

[mschipperheyn]

Works! Thanks! No React tab yet, but at least debugging works again

[evansolomon]

@jaredly I applied the change from facebook/react-native#3431 (minus the private-cli part, because that is not in the 0.12 npm package) but am still stuck on the waiting for connection screen. Could there be anything that wasn't in 0.12 that's needed?

[0xR]

+1 to fixing this, I'm showing how awesome debugging with react native is, but I have to explain there are no devtools anymore when you upgrade to 0.12

[repos-jmp]

@jaredly - I followed all the installation steps for the electron debug app, but I am not able to get the app running on Windows 7. The app displays waiting for connection and does not proceed further.

When I ran the 'npm install' command on the electron folder, node-gyp asked me to install Python 2.7 and Visual C++ 2013 Express, did that, but even after that it was not building correctly.
Looked up the node-gyp installation notes and issues, folks there suggested upgrading to Visual Studio Community Edition 2015 and setting a couple of environment variables, did that too, no luck.

Error Log

Any advice / other ways to get the debugger on windows ?

[despairblue]

I couldn't get it to work on MacOS X either. npm i worked with node 0.12 (with node 4 it failed with compile errors), webpack worked. But react-native did not connect, neither when run locally (running on a simulator) nor on a device. Running it in chrome made no difference.

I did apply https://github.com/facebook/react-native/pull/3431/files to packager.js and restarted the packager.

[repos-jmp]

Is there any other way to get a console or a log working till this issue is fixed ?
(I am trying to convince my team to adopt react-native for a new project and am stuck not knowing what is going wrong in my prototype)

[despairblue]

@guddadbhootha console.log is working. It prints to the xcode console when the app is run on the device, and if run inside the chrome debugger it prints to the chrome console.

Maybe I misunderstood what you meant :confused:

[repos-jmp]

@despairblue Thanks a lot :)
I tried again, with v0.13 and information provided at pull #3394 was able to get both the debugger (Chrome) and console working.

[mbrock]

This is very frustrating and a major blocking issue that prevents me from working. It is rather disheartening to read that none of the developers seem to have any idea how to fix it and that nobody has been assigned.

[ide]

Quick summary from what I've gleaned:

• The basic Chrome debugger (source maps, JavaScript breakpoints) works. When running in Chrome, RN uses a Chrome WebWorker, so on the "Console" tab of Web Inspector you'll have to click the dropdown that says <top frame> and pick the entry named ⚙debuggerWorker.js.
• You can get pretty far by debugging just JS without the React devtools. I want to call that out since it may not be obvious that using Chrome's Web Inspector to debug RN and using the React Devtools (this project) are two separate things.
• React Devtools currently do not work because it is not aware of WebWorkers. So you cannot inspect the React component hierarchy.
• As far as I am aware, Facebook is currently not working on this specific issue
• If the React Devtools in RN are critically important to your workflow, my sense is the clearest path to getting them working is to contribute to this repo and add WebWorker support
• Beyond RN, WebWorker support would be valuable since it'd let us debug React on the web when running it inside of a WebWorker.

[mbrock]

Thanks @ide. I took a quick look. If I understand correctly, we need to change RN to expose a small interface to its Worker, and then replace the uses of chrome.devtools.inspectedWindow.eval with calls to that interface, which would use postMessage to eval code in the worker. I'll see if I can get something working tomorrow.

I ran into some trouble (https://github.com/facebook/react-native/issues/3970) getting the latest RN master to work, but probably the changes to RN should be small and easy to rebase.

[mbrock]

I spent today trying to get this to work but ended up getting basically nowhere—I just don't understand what's going on; sorry, I believe this is a very tricky part of the framework for newbies like me.

Evaluating code in the web worker is straightforward enough, but most of the communication seems to happen through objects exposed via the __REACT_DEVTOOLS_GLOBAL_HOOK__ and I really lost the plot trying to figure out how that works.

It is probably way more efficient for someone who actually understands how the devtools integrate with the React internals to attempt this fix.

[atom992]

+1

[richardkazuomiller]

I just started working with RN for the first time and ran into this within about five minutes of getting started. As a beginner, I don't think I can contribute in any useful way right now so I won't be looking into it. As @mbrock said it would be good if someone who knows how the dev tools work could look into this!

[kassens]

I talked with @spicyj yesterday about the broken situation here. I'll try to fix the devtools with the current way of executing React Native in the cleaner web worker environment. If this shouldn't work out and we can't find a solution soon, we might revert to executing RN in the browser environment for debugging again.

[ide]

@kassens make sure to talk to @vjeux too because going back to Chrome will break some people's apps during development, depending on the npm packages they use.

Another solution (but will require much more work) would be to kill the Chrome debugger and instead run the RN JS inside of a clean Node context, and use Node Inspector to debug it.

[despairblue]

Another solution (but will require much more work) would be to kill the Chrome debugger and instead run the RN JS inside of a clean Node context, and use Node Inspector to debug it.

I'd recommend against this, as Node Inspector is terribly slow for any none trivial application. Slow in the sense of taking a couple of minutes for the Inspector, and thus the whole application, to load, instead of a couple of seconds (assuming debug-brk is used, not using it may speed up the application launch, but Node Inspector itself will still take a long time to load, compared to the chrome dev tools).

[ide]

I remember it being super slow (if the tools still perform terribly we should not use them). Was hoping new V8 and the Node tracing API may have fixed that. NFLX is actually giving a talk on debugging Node tonight.. anyone going and can report back if there is a trick to getting the Blink Inspector working well with Node?

[WoLfulus]

Updates on this?

[despairblue]

This one works extremely well, though it's still new and says it's unstabel. I've just tested it for a couple of minutes and it worked flawlessly. It looks like it's taking the approach nodejs itself wants to take., unless I misunderstood that.

[ExplodingCabbage]

@despairblue to clarify, are you saying that bugger is usable right now as a means of debugging React Native apps, or that it's something that the React Devtools team could use to fix their React Native support?

If the former, could you offer some instructions on how to hook it up to a React Native app and start debugging? I don't see how to do this from reading their readme.

[despairblue]

@ExplodingCabbage oh, that was misleading of me, sry. It was meant as a follow up to

@ide

Another solution (but will require much more work) would be to kill the Chrome debugger and instead run the RN JS inside of a clean Node context, and use Node Inspector to debug it.

me:

I'd recommend against this, as Node Inspector is terribly slow for any none trivial application.

Bugger is much more responsive and React Native was already shown to run in node on heroku, so I think this is possible. It's just a matter of implementing it.

[barockok]

any update ? :)

[vjeux]

Reading this issue, there are two separate problems that people are running into:

1) When we switched to a web worker, the console context doesn't have the user code. For this, we need to figure out if there's a way to make web worker the default context or if not, provide education. For example we can add a little arrow telling people to switch, we can also find a way to override global variables in the page environment such that whenever the user writes something in the console, it'll tell to switch to the web worker context.

2) Some people want the React dev tools back. Yeah, we need to fix this at some point

[atcchh]

@vjeux Oh great, when you can fix it ? We need React dev tools back.

[PaulBGD]

The temporary fix I have is editing node_modules/react-native/packager/debugger.html and replacing it with this: https://raw.githubusercontent.com/facebook/react-native/200d9af315a61272553f5902b7b743f8c3493123/packager/debugger.html

That's from the commit right before the code got executed in a Web Worker, and might bring back some other bugs. Otherwise, the React panel is back and everything seems to work for now.

[atom992]

my env is react-native 0.17.0, and I can not find the file under node_modules/react-native/packager/, but I can find debugger.html in
node_modules/react-native/local-cli/server/util/debugger.html

[PaulBGD]

@atom992 Yep that's the correct spot for 0.17.0, I forgot that I recently downgraded to 0.14.2.

[eulphean]

@atom992 did this solution work for you?

@PaulBGD I'm on react-native 0.18.0 and copying this debugger html to this directory didn't bring back the react tools. Also, the simulator doesn't complete reload.

Without react dev tools, debugging element styling feels challenging. Is there another way to change element styles on the fly that are reflected in react-native components while debugging?

[atom992]

@eulphean No, it is not work for my env.

[trymbill]

A massive +1 here too.

[zetachang]

The latest Nuclide (http://nuclide.io/) got dev tools built-in. Press Cmd+Shift+P will trigger the command palette and you can toggle the dev tools by searching for React Native Inspector

ps. I am using RN 0.17.0 and Nuclide 0.111.0

[fc-io]

Could not get it to work in chrome but nuclide worked right out of the box (using RN 0.18.0).

Thanks @zetachang!

[Almouro]

Can confirm it works in Nuclide even with RN 0.16, massive thanks @zetachang !

[sophiebits]

I guess we'll recommend this for now then. Thanks @matthewwithanm for building it into Nuclide!

[matthewwithanm]

I just used @frantic's fork!

[domi91c]

Confirming that Nuclide's react-devtools works. I'm just wondering, is it possible to change the state of app components with the devtools? So far I'm able to view the component hierarchy, state, and props, but can't edit anything.

[sophiebits]

Not currently, I believe. We have a separate issue tracking that.

[ajwhite]

Having this nuclide support is fantastic :clap: confirmed here as well.

[jaredly]

@portOdin editing state should work, but editing props is currently broken

[faceyspacey]

I can't get it to work with React Native 0.20.0

[sandarenu]

I also can't get it working with React Native 0.20.0.

[faceyspacey]

nor 0.21.0-rc

[yimiaodaren]

+1

[sibelius]

:+1:

[jkosturko]

Does this Nuclide solution work for Android? The docs seem like it doesn't and I get:

Waiting for a connection from React Native

This should happen pretty quickly. If it hasn't, something's wrong. 😢

Troubleshooting Tips:

Make sure a React Native app is running and that it's in DEV mode.
Only one element inspector can be active at a time. Close any other open inspectors.
There may be a zombie element inspector instance running. Try reopening your Atom window or check port 8097.

[zires]

Any updates?

[faceyspacey]

anyone had any success with Nuclide?

[mschipperheyn]

Nuclide works well for me. Debugging. Packager. Only problem is problems w
breakpoints not working correctly. But I have this problem on chrome also

anyone had any success with Nuclide

Kind regards,

Marc
M.Schipperheyn

[jbrodriguez]

The inspector is not working for me:
Nuclide 0.138
React Native 0.25.1
Android

[MintBerrry]

Getting 'Waiting for a connection from React Native' here..

[kageurufu]

The real problem with Nuclide's inspector with Android is at facebook/react-native Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js Line 184

The devtools are simply not being instantiated for Android platforms.

I have created PR8095 to resolve this, but for now the workaround I am using is, in my app's top level index.android.js

import setupDevtools from 'react-native/Libraries/Devtools/setupDevtools'

if( __DEV__ ) {
  setupDevtools()
}

[benjy]

Are there any other possible issues on Android, I tried applying this patch and your suggested work around but no luck with either.
lsof -i :8097 shows the atom process when I open the inspector in Nuclide but I still get the "Waiting for a connection from React Native" error. I'm using react-native ^0.28.0-rc.0

[kageurufu]

try running adb reverse tcp:8097 tcp:8097

[benjy]

Awesome, I was trying that before but without tcp: not sure if that was the key here or the combination of your fix as well. Cheers!

[aleclarson]

Another solution (but will require much more work) would be to kill the Chrome debugger and instead run the RN JS inside of a clean Node context...

@ide I like this idea. I've used Jam3/devtool to debug Node.js and there are no noticeable differences. Any thoughts on moving this forward?

[ide]

@aleclarson As of yesterday Node 6.3.0 was released and comes with debugger support. So this is the direction we should move forward in I think. (We should keep the Chrome debugger around for a few months but deprecate it and then remove it whenever Facebook has internally moved from Node 4 to Node 6.)

[aleclarson]

@ide Perfect. If we don't want to wait for Node 6, we _could_ use Jam3/devtool temporarily. That would save us from a couple more months of torture. 😛 I'm just happy this is going to be resolved soon. 👍

[ide]

Node 6.3 is here so it's possible to start building today, there's nothing to wait for. I wrote up a game plan here to provide some guidance: https://github.com/facebook/react-native/issues/8641

[aleclarson]

...and then remove it whenever Facebook has internally moved from Node 4 to Node 6

Sorry, I was referring to this line. I don't see why devtool wouldn't work while we wait.

[faceyspacey]

What's the update for using chrome dev tools (or I guess node-based devtools if that becomes the holistic direction)? I'd venture to say only a minority of RN developers are using Nuclide. Last time I checked, Nuclide's React inspector was extremely slow, had problems staying connected, and was ultimately unusable. It seems the optimum (and most up to date) experience will always be in chrome devtools. We should strive to make that priority and not settle on just Nuclide support.

It seems we're going the holistic node debugging route for RN--what are we waiting on there to make that happen? And what challenges will it pose to things like Redux Devtools if any?

[gaearon]

To debug RN today, use the standalone DevTools package.
There are still some flakiness issues with stable RN build, but RN master works really well with it.

[dariocravero]

@gaearon is there any way to debug the standalone devtools when the it gets stuck on "Connecting to React..."? Thanks :)

[gaearon]

You can try to apply these changes locally:

https://github.com/facebook/react-native/commit/7a3ab96d94073b22853992b5e0b3f8e26b8cfd51
https://github.com/facebook/react-native/commit/934cd82941d2b4fa49e49517acd454a775fe94b8

They fix the flakiness due to race conditions in existing code. When they're in a stable RN release, everything should be good out of the box.

As I said in the comment above:

There are still some flakiness issues with stable RN build, but RN master works really well with it.

[dariocravero]

Perfect! Will give that a go now, thanks again :)

[gaearon]

Let me know if it helps! (I hope it should.)

[dariocravero]

@gaearon, here's an update on this, it seems that it wasn't a problem with the packages that are published on npm but instead an conflict with Debug JS Remotely. If that option is enabled, the devtools get stuck in the connecting message. If I disable it, after reloading both, the simulator and the devtools it works alright :).
Are the devtools intended to be used on their own without the extra JS remote debugging? Or might this be hinting a bug? Thanks!

[cwagner22]

Just leaving that here: https://github.com/jhen0409/react-native-debugger
You can use it to debug react-native (with devtools), it might help the ones like me who are just starting...

[gaearon]

@cwagner22 This package has a few extra tools but it uses exactly the same code underneath.

@dariocravero Do you mind sending a PR to package README explaining this? I don't know anything about the "Debug JS Remotely" option—first time hearing about it. So yes, I never tested with it, and maybe it won't work. If you could explain what exactly it is doing maybe we can figure it out. Thanks!

[jhen0409]

here's an update on this, it seems that it wasn't a problem with the packages that are published on npm but instead an conflict with Debug JS Remotely. If that option is enabled, the devtools get stuck in the connecting message. If I disable it, after reloading both, the simulator and the devtools it works alright :).
Are the devtools intended to be used on their own without the extra JS remote debugging? Or might this be hinting a bug? Thanks!

@dariocravero I guess the problem the same with https://github.com/facebook/react-devtools/issues/476#issuecomment-279153990, we should ensure requestIdleCallback works with Debug JS Remotely, maybe just sync time between host and simulator/device. (I have received the same issue at https://github.com/jhen0409/react-native-debugger/issues/45)

[gaearon]

This is interesting. Can you please file an issue in this repo so I could take a look?

[gaearon]

Using React DevTools in React Native is now officially documented:
http://facebook.github.io/react-native/docs/debugging.html#react-developer-tools

I'll lock this issue. If you have any further problems please file new issues.