Cannot debug JS remotely on iOS device

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

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.

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

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

Error I get on simulator:

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_

+1

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

+1

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

also present on 0.47

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

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?

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?

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 #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:

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

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

@gabceb

@gabceb Thanks! Looks like there is a new section in the 0.49 docs that deals with this problem. #14885

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.

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

My workaround:

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

@rynop

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 react-native@0.38.0 right now.

updating Chrome solved it for me

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/

Navigation Menu

Repository navigation

Cannot debug JS remotely on iOS device #14288

Description

Additional Information

Observations

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cannot debug JS remotely on iOS device #14288

Description

Description

Additional Information

Observations

Activity

Fab-z4qx commented on Jun 15, 2017

lazyhoneyant commented on Jun 15, 2017

Jacse commented on Jul 7, 2017

Jacse commented on Jul 7, 2017

RyanWan commented on Jul 8, 2017

Jacse commented on Jul 8, 2017

AlePue commented on Jul 13, 2017

albertzuo commented on Jul 19, 2017

pigflymoon commented on Jul 20, 2017

vonovak commented on Aug 1, 2017

locolab commented on Aug 9, 2017

ywongweb commented on Sep 5, 2017

smathson commented on Sep 30, 2017

ywongweb commented on Oct 1, 2017

gabceb commented on Oct 1, 2017

ywongweb commented on Oct 1, 2017

rynop commented on Nov 1, 2017

rynop commented on Nov 3, 2017

octopitus commented on Jan 19, 2018

maluramichael commented on Feb 27, 2018

franzmoro commented on Apr 20, 2018

FrankVio commented on Oct 11, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions