This repository was archived by the owner on Jun 26, 2020. It is now read-only.
This repository was archived by the owner on Jun 26, 2020. It is now read-only.
[React Native] Devtools can't find React within the Web Worker (help wanted) #229
Closed
Description
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.
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
sophiebits commentedon 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 commentedon 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:
sebmarkbage commentedon 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 commentedon 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 commentedon 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 commentedon Oct 9, 2015
This needs to be fixed. @jaredly have you made any progress?
sulliwane commentedon 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 commentedon Oct 13, 2015
Yes, the devtools currently do not work with RN.
tomkur commentedon Oct 13, 2015
👍
yrokhlin commentedon Oct 14, 2015
+1 to this, it's quiet possibly the most annoying thing ever.
rreusser commentedon Oct 14, 2015
This sounds like also perhaps the reason
windowis 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 commentedon 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?
104 remaining items
gaearon commentedon 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 commentedon Feb 25, 2017
@gaearon is there any way to debug the standalone devtools when the it gets stuck on "Connecting to React..."? Thanks :)
gaearon commentedon 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:
dariocravero commentedon Feb 25, 2017
Perfect! Will give that a go now, thanks again :)
gaearon commentedon Feb 25, 2017
Let me know if it helps! (I hope it should.)
dariocravero commentedon 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 commentedon 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 commentedon 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 commentedon Feb 26, 2017
@dariocravero I guess the problem the same with #476 (comment), we should ensure
requestIdleCallbackworks 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 commentedon Feb 26, 2017
This is interesting. Can you please file an issue in this repo so I could take a look?
gaearon commentedon 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.