Cannot debug JS remotely on iOS device

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:22
  • Comments:22 (2 by maintainers)

github_iconTop GitHub Comments

9reactions
ywongwebcommented, Oct 13, 2017

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
6reactions
locolabcommented, Aug 9, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Debug JS Remotely is not showing on iOS simulator
It seems like "Start debug" opens flipper but doesn't allow remote debugging. Did they also removed support for remote JS execution? – cglacet....
Read more >
Debugging - React Native
On iOS devices, open the file RCTWebSocketExecutor.mm and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" ...
Read more >
Debug on iOS Devices and the iOS Simulator – Adaptive.js Docs
Debug on either an iOS device directly or debug on an iOS simulator. ... on Mac OS X. However, it is not possible...
Read more >
How to Debug Websites on iPhone Safari | BrowserStack
Method 1: Debug using the Web Inspector feature on iPhones or iPads · Connect the iOS device to the machine. · Enable the...
Read more >
React Native | WebStorm Documentation - JetBrains
Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins ... Exclude the android and iOS folders from the project.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found