New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Sep 26, 2015

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Sep 26, 2015

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@sebmarkbage

sebmarkbage Oct 7, 2015

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Oct 7, 2015

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Oct 7, 2015

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@ksheedlo

ksheedlo Oct 9, 2015

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

ksheedlo commented Oct 9, 2015

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

@sulliwane

This comment has been minimized.

Show comment
Hide comment
@sulliwane

sulliwane 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)

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Oct 13, 2015

Yes, the devtools currently do not work with RN.

ide commented Oct 13, 2015

Yes, the devtools currently do not work with RN.

@tomkur

This comment has been minimized.

Show comment
Hide comment
@tomkur

tomkur commented Oct 13, 2015

👍

@yrokhlin

This comment has been minimized.

Show comment
Hide comment
@yrokhlin

yrokhlin Oct 14, 2015

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

yrokhlin commented Oct 14, 2015

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

@rreusser

This comment has been minimized.

Show comment
Hide comment
@rreusser

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

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

This comment has been minimized.

Show comment
Hide comment
@mschipperheyn

mschipperheyn 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?

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide 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?

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

This comment has been minimized.

Show comment
Hide comment
@mschipperheyn

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

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

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Oct 14, 2015

Contributor

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]

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Oct 14, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Oct 14, 2015

@jaredly fantastic! that's really cool.

ide commented Oct 14, 2015

@jaredly fantastic! that's really cool.

@jaredly

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Oct 14, 2015

Contributor

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

Contributor

jaredly commented Oct 14, 2015

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

@skevy

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Oct 14, 2015

Awesome. I'm checking this out tonight.

skevy commented Oct 14, 2015

Awesome. I'm checking this out tonight.

@evansolomon

This comment has been minimized.

Show comment
Hide comment
@evansolomon

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

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

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Oct 15, 2015

Contributor

@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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@gre

gre 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

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

This comment has been minimized.

Show comment
Hide comment
@despairblue

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

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

This comment has been minimized.

Show comment
Hide comment
@gre

gre Oct 15, 2015

@despairblue great! thanks

gre commented Oct 15, 2015

@despairblue great! thanks

@rreusser

This comment has been minimized.

Show comment
Hide comment
@rreusser

rreusser Oct 15, 2015

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

rreusser commented Oct 15, 2015

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

@jaredly

This comment has been minimized.

Show comment
Hide comment
@jaredly

jaredly Oct 15, 2015

Contributor

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

Contributor

jaredly commented Oct 15, 2015

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

@mschipperheyn

This comment has been minimized.

Show comment
Hide comment
@mschipperheyn

mschipperheyn Oct 15, 2015

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

mschipperheyn commented Oct 15, 2015

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

@evansolomon

This comment has been minimized.

Show comment
Hide comment
@evansolomon

evansolomon Oct 16, 2015

@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?

evansolomon commented Oct 16, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@0xR

0xR Oct 17, 2015

+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

0xR commented Oct 17, 2015

+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

This comment has been minimized.

Show comment
Hide comment
@repos-jmp

repos-jmp Oct 21, 2015

@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 ?

repos-jmp commented Oct 21, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@despairblue

despairblue Oct 22, 2015

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.

despairblue commented Oct 22, 2015

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

This comment has been minimized.

Show comment
Hide comment
@repos-jmp

repos-jmp Oct 26, 2015

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)

repos-jmp commented Oct 26, 2015

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

This comment has been minimized.

Show comment
Hide comment
@despairblue

despairblue Oct 26, 2015

@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 😕

despairblue commented Oct 26, 2015

@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 😕

@repos-jmp

This comment has been minimized.

Show comment
Hide comment
@repos-jmp

repos-jmp Oct 28, 2015

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

repos-jmp commented Oct 28, 2015

@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 comment has been minimized.

Show comment
Hide comment
@mbrock

mbrock Nov 6, 2015

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.

mbrock commented Nov 6, 2015

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.

ghost pushed a commit to facebook/react-native that referenced this issue Jun 15, 2016

Reverted commit D3430206
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 #8095

Reviewed By: bestander

Differential Revision: D3430206

Pulled By: javache

fbshipit-source-id: 76f19407271a3779e12bd244f1bc31ef3a8659c7
@benjy

This comment has been minimized.

Show comment
Hide comment
@benjy

benjy Jun 15, 2016

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

benjy commented Jun 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kageurufu

kageurufu Jun 15, 2016

try running adb reverse tcp:8097 tcp:8097

kageurufu commented Jun 15, 2016

try running adb reverse tcp:8097 tcp:8097

@benjy

This comment has been minimized.

Show comment
Hide comment
@benjy

benjy Jun 16, 2016

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!

benjy commented Jun 16, 2016

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!

MattFoley added a commit to skillz/react-native that referenced this issue Jun 17, 2016

Remove iOS platform check for running devtools
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

MattFoley added a commit to skillz/react-native that referenced this issue Jun 17, 2016

Reverted commit D3430206
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

facebook-github-bot pushed a commit to facebook/react-native that referenced this issue Jun 24, 2016

Remove iOS platform check for running devtools
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 #8095

Reviewed By: javache

Differential Revision: D3443980

Pulled By: andreicoman11

fbshipit-source-id: 3d7b2e83cf4158a1228d2e21510509ab63411a5d

ghost pushed a commit to facebook/react-native that referenced this issue Jun 24, 2016

Reverted commit D3443980
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 #8095

Reviewed By: javache

Differential Revision: D3443980

Pulled By: bestander

fbshipit-source-id: ce0f7dd62ae0f7dfe6654380821660f8660318a6
@aleclarson

This comment has been minimized.

Show comment
Hide comment
@aleclarson

aleclarson Jul 7, 2016

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?

aleclarson commented Jul 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Jul 7, 2016

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

ide commented Jul 7, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@aleclarson

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

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide 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

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

This comment has been minimized.

Show comment
Hide comment
@aleclarson

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

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

Remove iOS platform check for running devtools
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

Reverted commit D3430206
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

Remove iOS platform check for running devtools
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

Reverted commit D3443980
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

Remove iOS platform check for running devtools
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

Reverted commit D3430206
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

Remove iOS platform check for running devtools
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

Reverted commit D3443980
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

This comment has been minimized.

Show comment
Hide comment
@faceyspacey

faceyspacey 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?

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

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Feb 15, 2017

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@dariocravero

dariocravero Feb 25, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Feb 25, 2017

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@dariocravero

dariocravero Feb 25, 2017

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

dariocravero commented Feb 25, 2017

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Feb 25, 2017

Member

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

Member

gaearon commented Feb 25, 2017

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

@dariocravero

This comment has been minimized.

Show comment
Hide comment
@dariocravero

dariocravero 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!

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

This comment has been minimized.

Show comment
Hide comment
@cwagner22

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

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

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Feb 25, 2017

Member

@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!

Member

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

This comment has been minimized.

Show comment
Hide comment
@jhen0409

jhen0409 Feb 26, 2017

Contributor

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)

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Feb 26, 2017

Member

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

Member

gaearon commented Feb 26, 2017

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jun 9, 2017

Member

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.

Member

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.