Skip to content
This repository has been archived by the owner. It is now read-only.

[React Native] Devtools can't find React within the Web Worker (help wanted) #229

Closed
ide opened this issue Sep 26, 2015 · 98 comments
Closed

[React Native] Devtools can't find React within the Web Worker (help wanted) #229

ide opened this issue Sep 26, 2015 · 98 comments
Assignees

Comments

@ide
Copy link

@ide ide commented Sep 26, 2015

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
Copy link
Contributor

@sophiebits sophiebits commented Sep 26, 2015

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
Copy link
Contributor

@jaredly jaredly commented Sep 26, 2015

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 notifications@github.com 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
Copy link
Member

@sebmarkbage sebmarkbage commented Oct 7, 2015

@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
Copy link
Contributor

@jaredly jaredly commented Oct 7, 2015

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
Copy link
Contributor

@jaredly jaredly commented Oct 7, 2015

:/ 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
Copy link

@ksheedlo ksheedlo commented Oct 9, 2015

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

@sulliwane
Copy link

@sulliwane sulliwane commented Oct 13, 2015

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
Copy link
Author

@ide ide commented Oct 13, 2015

Yes, the devtools currently do not work with RN.

@tomkur
Copy link

@tomkur tomkur commented Oct 13, 2015

👍

@yrokhlin
Copy link

@yrokhlin yrokhlin commented Oct 14, 2015

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

@rreusser
Copy link

@rreusser rreusser commented Oct 14, 2015

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
Copy link

@mschipperheyn mschipperheyn commented Oct 14, 2015

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
Copy link
Author

@ide ide commented Oct 14, 2015

@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
Copy link

@mschipperheyn mschipperheyn commented Oct 14, 2015

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
Copy link
Contributor

@jaredly jaredly commented Oct 14, 2015

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
Copy link

@skevy skevy commented Oct 14, 2015

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

@ide
Copy link
Author

@ide ide commented Oct 14, 2015

@jaredly fantastic! that's really cool.

@jaredly
Copy link
Contributor

@jaredly jaredly commented Oct 14, 2015

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

@skevy
Copy link

@skevy skevy commented Oct 14, 2015

Awesome. I'm checking this out tonight.

@evansolomon
Copy link

@evansolomon evansolomon commented Oct 14, 2015

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
Copy link
Contributor

@jaredly jaredly commented Oct 15, 2015

@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
Copy link

@gre gre commented Oct 15, 2015

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
Copy link

@despairblue despairblue commented Oct 15, 2015

@rreusser @gre you can access it from the console if you choose the web worker's context:
screen shot 2015-10-15 at 13 43 31

Took me a while to figure this out.

@gre
Copy link

@gre gre commented Oct 15, 2015

@despairblue great! thanks

@rreusser
Copy link

@rreusser rreusser commented Oct 15, 2015

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

@jaredly
Copy link
Contributor

@jaredly jaredly commented Oct 15, 2015

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

@mschipperheyn
Copy link

@mschipperheyn mschipperheyn commented Oct 15, 2015

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

@aleclarson
Copy link

@aleclarson aleclarson commented Jul 7, 2016

@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
Copy link
Author

@ide ide commented Jul 7, 2016

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
Copy link

@aleclarson aleclarson commented Jul 7, 2016

...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.

samerce added a commit to iodine/react-native that referenced this issue Aug 23, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: bestander

Differential Revision: D3430206

Pulled By: javache

fbshipit-source-id: 826f0252fff3f0ec2c843149540a0109e34d1d18
samerce added a commit to iodine/react-native that referenced this issue Aug 23, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: bestander

Differential Revision: D3430206

Pulled By: javache

fbshipit-source-id: 76f19407271a3779e12bd244f1bc31ef3a8659c7
samerce added a commit to iodine/react-native that referenced this issue Aug 23, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: javache

Differential Revision: D3443980

Pulled By: andreicoman11

fbshipit-source-id: 3d7b2e83cf4158a1228d2e21510509ab63411a5d
samerce added a commit to iodine/react-native that referenced this issue Aug 23, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: javache

Differential Revision: D3443980

Pulled By: bestander

fbshipit-source-id: ce0f7dd62ae0f7dfe6654380821660f8660318a6
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: bestander

Differential Revision: D3430206

Pulled By: javache

fbshipit-source-id: 826f0252fff3f0ec2c843149540a0109e34d1d18
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: bestander

Differential Revision: D3430206

Pulled By: javache

fbshipit-source-id: 76f19407271a3779e12bd244f1bc31ef3a8659c7
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: javache

Differential Revision: D3443980

Pulled By: andreicoman11

fbshipit-source-id: 3d7b2e83cf4158a1228d2e21510509ab63411a5d
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
Summary:
Currently, DevTools only work under ios (although this is undocumented!), because the JavaScriptEngine initialization process skips setupDevTools() on android.

DevTools work fine with Android, as tested on 0.26, 0.27, and 0.28 using Nuclide's inspector.

For reference, [the relevant issue on react-devtools](facebook/react-devtools#229).
Closes facebook#8095

Reviewed By: javache

Differential Revision: D3443980

Pulled By: bestander

fbshipit-source-id: ce0f7dd62ae0f7dfe6654380821660f8660318a6
@faceyspacey
Copy link

@faceyspacey faceyspacey commented Oct 29, 2016

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
Copy link
Member

@gaearon gaearon commented Feb 15, 2017

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
Copy link

@dariocravero dariocravero commented Feb 25, 2017

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

@gaearon
Copy link
Member

@gaearon gaearon commented Feb 25, 2017

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
Copy link

@dariocravero dariocravero commented Feb 25, 2017

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

@gaearon
Copy link
Member

@gaearon gaearon commented Feb 25, 2017

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

@dariocravero
Copy link

@dariocravero dariocravero commented Feb 25, 2017

@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
Copy link

@cwagner22 cwagner22 commented Feb 25, 2017

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
Copy link
Member

@gaearon gaearon commented Feb 25, 2017

@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
Copy link
Contributor

@jhen0409 jhen0409 commented Feb 26, 2017

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
Copy link
Member

@gaearon gaearon commented Feb 26, 2017

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

@gaearon
Copy link
Member

@gaearon gaearon commented Jun 9, 2017

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.

@facebook facebook locked and limited conversation to collaborators Jun 9, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.