[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 [email protected] 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
#229 (comment)
.

[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]

👍

[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 facebook/react-native#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

[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: facebook/react-native#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:

facebook/react-native@7a3ab96
facebook/react-native@934cd82

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 #476 (comment), 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 jhen0409/react-native-debugger#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.