React-native-debugger: 6.0-beta1 stuck with "Waiting for React to connect..."

Created on 22 Feb 2017 · 11Comments · Source: jhen0409/react-native-debugger

The Debug JS works, the packager is working, but the React / Redux tools doesn't load, it's stuck in "Waiting for React to connect" even though it's already being able to log and replay redux actions, and I can set breakpoints and it does work.

On windows 10 x64, node 7.50 and react-native 0.41.2 / react 15.4.2

Using a real device through Wifi (using adb tcpip 5555 / adb shell ip route / adb connect 192.168.0.109:5555

question

Source

pocesar

Most helpful comment

at least the part that needs to edit setupDevTools.js manually, is there anyway to set that variable programaticaly?

Currently you can use connectToDevTools in react-devtools-core package instead of built-in setupDevtools.

// Make sure it before imported at `import { ... } from 'react-native'`
import { connectToDevTools } from 'react-devtools-core'
import { ... } from 'react-native'

connectToDevTools({
  host: '<yourIP>',
  resolveRNStyle: require('flattenStyle'),
})

jhen0409 on 22 Feb 2017

👍4

All 11 comments

Using a real device through Wifi (using adb tcpip 5555 / adb shell ip route / adb connect 192.168.0.109:5555

You need to change hostname to your machine IP, have you tried that?

It already in readme, although the link is wrong for now. 😬

jhen0409 on 22 Feb 2017

😄1 👍1

ah, that's the reason why I couldn't find the setting, the README is indeed pointing to something totally unrelated...

pocesar on 22 Feb 2017

changed the like to:

  if (Platform.OS === 'android' && NativeModules.AndroidConstants) {
    hostname = '192.168.0.107';//NativeModules.AndroidConstants.ServerHost.split(':')[0];
  }

but now it shows "Connecting to React…" and stuck

pocesar on 22 Feb 2017

@pocesar I think this section will help you, this is related to recently react-devtools changes. Maybe it's requestIdleCallback bug in debug mode of RN.

jhen0409 on 22 Feb 2017

👎1

works now, but those modifications are non-portable. isn't there a better way? there's no problem with the time (both device and dev computer uses NTP pool, plus my router as well), at least the part that needs to edit setupDevTools.js manually, is there anyway to set that variable programaticaly?

pocesar on 22 Feb 2017

at least the part that needs to edit setupDevTools.js manually, is there anyway to set that variable programaticaly?

Currently you can use connectToDevTools in react-devtools-core package instead of built-in setupDevtools.

// Make sure it before imported at `import { ... } from 'react-native'`
import { connectToDevTools } from 'react-devtools-core'
import { ... } from 'react-native'

connectToDevTools({
  host: '<yourIP>',
  resolveRNStyle: require('flattenStyle'),
})

jhen0409 on 22 Feb 2017

👍4

it's giving this

[React DevTools] Connected
F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:97 [React DevTools] Only one connection allowed at a time. Closing the previous connection

log.warn @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:97
(anonymous) @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:56
emitOne @ events.js:96
emit @ events.js:188
handleUpgrade @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:87
completeUpgrade @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:272
handleUpgrade @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:199
WebSocketServer._ultron.on @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:85
emitThree @ events.js:116
emit @ events.js:194
onParserExecuteCommon @ _http_server.js:459
onParserExecute @ _http_server.js:418

F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:93 [React DevTools] Connected
F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:93 [React DevTools] Connection to RN closed
F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:93 [React DevTools] Connected
F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:12409 failed to connect

(anonymous) @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:12409
setInterval (async)
value @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:12408
Store @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:12141
(anonymous) @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:304
inject @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:89
value @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:303
value @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:233
CallbackQueue.notifyAll @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:2783
close @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:5885
closeAll @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:2931
perform @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:2907
batchedMountComponentIntoNode @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:6773
perform @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:2901
batchedUpdates @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:5744
batchedUpdates @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:2675
_renderNewRootComponent @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:6822
_renderSubtreeIntoContainer @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:6851
render @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:6855
(anonymous) @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:19
setTimeout (async)
reload @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:18
initialize @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:49
(anonymous) @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\react-devtools-core\build\standal…:61
emitOne @ events.js:96
emit @ events.js:188
handleUpgrade @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:87
completeUpgrade @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:272
handleUpgrade @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:199
WebSocketServer._ultron.on @ F:\Users\Paulo\Desktop\RNDebugger\resources\app.asar\node_modules\ws\lib\WebSocketServer.js:85
emitThree @ events.js:116
emit @ events.js:194
onParserExecuteCommon @ _http_server.js:459
onParserExecute @ _http_server.js:418

pocesar on 22 Feb 2017

@pocesar maybe you need to revert setupDevtools change, or just set window.__REACT_DEVTOOLS_PORT__ with a different port.

jhen0409 on 23 Feb 2017

yeah, it doesn't work, I guess I'll need to stick with manually patching the setupDevtools file

pocesar on 23 Feb 2017

hmm it should work, and currently the usage have been replaced old setupDevtools on master of RN.

Make sure it before imported at import { ... } from 'react-native' (can be written at the top of index.android.js), otherwise I can try it again for Windows.

jhen0409 on 24 Feb 2017

I have experienced similar symptoms.
In my case, it suddenly started taking very long for the component view to show ("Connecting to React..."), but the console was functioning as normal.

Then, when I was initiating an action that triggered substantial animation, the UI would freeze (physical device) and the dev tools would be disconnected for up to a couple of minutes.

At some point, after attempting to isolate the issue and having everything working well on another physical device and on a different machine, I noticed that fixing a clock drift made everything work again (by changing the device time manually, as the mobile network time was way off).

I did not get a warning about the drift, and it drifted about 1 minute (perhaps less) from my server time.