React-native: Cannot debug JS remotely on iOS device

[ywongweb]

Description

Create app with react-native init myapp

Run the app in Xcode with real iPhone as target, open up the developer menu and select debug js remotely.

App screen on device now stuck at Loading from pre-bundler file...

In the debugger console log I can see an error:
GET file:///var/containers/Bundle/Application/FB3D960C-BF23-4F8A-B458-A9FFED6AFEF2/myapp.app/main.jsbundle net::ERR_FILE_NOT_FOUND

Additional Information

• React Native version: 0.44.2
• Platform: iOS device only, the exact same code works on all other debugging methods including android devices
• Development Operating System: OSX
• Dev tools: Xcode

Observations

• Both server and phone are connected to the same network
• On device remote JS debugging does not work with RCTWebSocketExecutor.m set to localhost or server local ip
• With IP set tolocalhost, I get the usual red screen error warning I should change the IP in RCTWebSocketExecutor
• With IP set to server local IP, I don't get the green progress bar when loading the app, instead I have a black bar with the text loading from pre-bundle file, and it will just get stuck in here forever
• No activity on the debugger window
• At this point, I can see and error log in the debugger console GET file:///var/containers/Bundle/Application/FB3D960C-BF23-4F8A-B458-A9FFED6AFEF2/ttt.app/main.jsbundle net::ERR_FILE_NOT_FOUND
• Using the phone's browser and navigate to http://server-local-ip:8081/debugger-proxy?role=proxy works

[Fab-z4qx]

Same issue on IOS Phone emulator with React Native version: 0.45.1, on macOS 10.12.5.
The app crash if the remote debug is set to true. No problem on android, emulator and hardware device.

[lazyhoneyant]

+1 same issue
React Native version: 0.45.1,
Mac OS : 10.12.5

In my case, rm -rf node_modules , yarn again. It works.

[Jacse]

This happens on emulators as well. Same issue at #14672

[Jacse]

Error I get on simulator:
2017-07-07 21:35:54.466 [info][tid:main][RCTCxxBridge.mm:184] Initializing <RCTCxxBridge: 0x6000001cb8b0> (parent: <RCTBridge: 0x6000000bf860>, executor: RCTWebSocketExecutor) 2017-07-07 21:35:58.839 [fatal][tid:main] Exception '*** -[__NSArrayI objectAtIndex:]: index 2 beyond bounds [0 .. 1]' was thrown from JS thread WARNING: Logging before InitGoogleLogging() is written to STDERR F0707 21:35:58.873145 189464576 Instance.cpp:48] Check failed: nativeToJsBridge_

[RyanWan]

+1

[Jacse]

I can confirm this happens on versions 0.45.1, 0.44.3, but not on 0.44.0

[Alejandro-Glooko]

+1

[albertzuo]

+1

[pigflymoon]

+1
"react": "16.0.0-alpha.12",
"react-native": "^0.45.1",
return to
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
works fine again.

[vonovak]

also present on 0.47

[locolab]

+1 for 0.43 and 0.47. Infuriating– cannot test any iOS push notifications.

[ywongweb]

I can now duplicate this problem by attempting to debug on my phone's hotspot network.
(original post was tested on an official BT Fibre router, which still has the same problem at the time of this post)

Steps:
Enable hotspot on my Android phone
Connect both devices to the same hotspot network
Ping the iPhone IP via Mac -> works
Run app on device in xcode
Same device remote debug problem as in the original post

I am able to get device debugging working reliably on some wifi networks. Could this be a network related problem? Any networking experts out there that can help?

[smathson]

Was running into this issue on my home network but not my work network and tracked it down to a router setting that was blocking http://xip.io/ from doing it's thing. Specifically the custom Tomato firmware on my router was trying to block DNS rebind attacks and I was able to add xip.io to a whitelist to allow it.

Might be worth adding something to the docs about how xip.io is used in the remote debugging process?

[ywongweb]

Here is a temporary work around for this issue.

Make sure you have a sim card in your iPhone.
Turn on data and hotspot.
Connect your iPhone to your Mac using the USB cable.
On the Mac, connect to the iPhone's hotspot.
Clean project and run again
You should now have the option to debug JS remotely on the dev menu.

update:
Using the suggestions in https://github.com/facebook/react-native/pull/14885 and a few google searches, I have managed to fixed this problem on our BT router. The problem was that some router blocks wildcard DNS binding which xip.io uses. The solution is to change the DNS of the connection on your Mac. You can also change the DNS on the router itself instead if you have access.

Steps:

1. On you dev machine, System Preference -> Network -> Wi-Fi -> adcanced -> nameOfYourNetwork
2. In the DNS tab change the ip to 8.8.8.8
3. Make the same DNS change on your iPhone

[gabceb]

I know this is a hard one to debug because everyone has different setups but FWIW this was happening to us when we tried to bump RN from 0.42 to 0.47 which we decided not to do because of this issue. Last week we moved from 0.42 to 0.49-rc-5 and it doesn't happen anymore.

May be worth trying in 0.49-rc

[ywongweb]

@gabceb Thanks! Looks like there is a new section in the 0.49 docs that deals with this problem. https://github.com/facebook/react-native/pull/14885

[rynop]

I have a similar problem, however when I click Debug JS Remotely from my physical iOS device it opens up the debugger in xcode to RCTModuleData.mm and gives a EXC_BAD_ACCESS error.

I'm using react-native 0.44.0. I've followed the troubleshooting instructions, and my phone and laptop are on the same network AND nslookup works from my laptop:

nslookup 192.168.1.169.xip.io
Server:     192.168.1.1
Address:    192.168.1.1#53

Non-authoritative answer:
Name:   192.168.1.169.xip.io
Address: 192.168.1.169

I was using OpenDNS. Tried Google DNS and had same results.

Live reload on physical device works. Debug JS Remotely works from emulator.

Why would clicking Debug JS Remotely on my phone open up the Xcode debugger? FWIW I can press the debug "play" button in Xcode 100x but keeps hitting the same line in the SS above.

[rynop]

I resolved my issue by cleaning Xcode project Command-Option-Shift-K and re-building to the physical iPhone target.

[octopitus]

My workaround:

1. Make sure that both iPhone and server are connected to the same network.
2. Clean XCode project (Product -> Clean or Cmd+Shift+K).
3. Delete /build folder in /ios.
4. Delete the old app.
5. Re-build.

[maluramichael]

I resolved my issue by cleaning Xcode project Command-Option-Shift-K and re-building to the physical iPhone target.

Thank you @rynop this worked for me. I'm using [email protected] right now.

[franzmoro]

updating Chrome solved it for me

[FrankVio]

using my computers LAN IP did the trick for me. So in my browser, I replaced http://localhost:8081/debugger-ui/ to http://192.168.xxx.xxx:8081/debugger-ui/