react-native: 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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 22
Comments: 22 (2 by maintainers)

Most upvoted comments

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:

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

ywongweb on Oct 13, 2017

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

locolab on Aug 9, 2017

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.

octopitus on Jan 19, 2018

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

rynop on Nov 3, 2017

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

lazyhoneyant on Jun 16, 2017

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.

Fab-z4qx on Jun 15, 2017

@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

ywongweb on Oct 1, 2017