React-native: "Remote JS Debugger"-option gives "Connection timed out" on real device (iOS)

Created on 30 Mar 2018  路  27Comments  路  Source: facebook/react-native

While I can use the Remote-debugger option perfectly on any iOS-Simulator, it is not possible anymore on real device. Both, device and developer-machine, are connected to the same WiFi. Packager is running. As long as the remote debugger is turned off, I can run the application on my iOS-Device. Making changes to the code and "Reload" on device will take effect and execute the recent code changes as expected.

As soon as I enable the option "Debug JS Remotely", the following error appears:

"Connecting to http://localhost:8081/debugger-proxy?role=client timed out"

I have tried it out with blank fresh installed React-Native projects (react-native init xxx) without any modification and on several iMac and Macbook-Machines with several iPhones (5, 6, 7, X) as well.

I also tried it out with react-native 0.52, 0.53 and 0.54.

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 9.10.0
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Not Found
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: ^16.3.0-alpha.1 => 16.3.0
  react-native: 0.54.4 => 0.54.4

Steps to Reproduce

  1. react-native init testapp
  2. cd testapp/ios
  3. open the .xcodeproj-File with XCode
  4. Select my connected iPhone as target device
  5. Run the application (_either auto-spawn of "npm start" via Xcode or run it manually, it gives the same result_)

Expected Behavior

Enabling the option "Debug JS Remotely" in the developer machine should also work on connected real device, not only on iOS-Simulator.

Actual Behavior

Without the "Debug JS-Remotely"-option the application can be launched as expected on connected real device as described in the official Documentation. As soon as I enable the "Debug JS Remotely"-option in developer menu, the following error occur:

Connecting to http://localhost:8081/debugger-proxy?role=client timed out

I have seen a similar issue #14186 from nearly one year ago that was already closed. Maybe this issue re-appeared in latest versions?

Screenshots:

Running the application without Remote-Debugger:

img_5994

Activate the Developer-Menu:

img_9280dc617466-1

Error after enabling the Remote-Debugger option in Developer-Menu:

img_5993

Bug DX Debugging iOS Stale

Most helpful comment

Same problem here as well. Verified that the 3 troubleshooting steps here are not the issue: https://facebook.github.io/react-native/docs/running-on-device.html

All 27 comments

I am also facing the same issue. Its working fine in iOS Simulator not only on real device. Any idea? Refered this issue and link as well.

React Version : 0.54.4

Same problem here, I'm running the app on Android simulator

"react": "16.3.1",
"react-native": "0.55.2"

Windows 10

Same problem here as well. Verified that the 3 troubleshooting steps here are not the issue: https://facebook.github.io/react-native/docs/running-on-device.html

same problem here, maybe is a bug of this version?

a little update that may can help someone.
I just found that, in my osx firewall, i was blocking incoming connections to node. I disabled that block and the remote debugging started working again

@tamiyadd in my case, osX firewall is off. Still i am getting this issue.

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

@react-native-bot Yes as per @BilalDja comment

remove OldVersion

same problem
Environment:
OS: macOS High Sierra 10.13.5
Node: 10.3.0
Xcode: 9.4.1
React:0.55.4

cannot connect real device

Debugger doesn't work on the real device and network requests fail also.
RN: 0.55.3

(IOS)maybe this problem cause by Bundle Identifier ,i solve it by changing APPID which exsiting in profile,Not using default APPID

@MrsBookik I solved problem by adding Allow Arbitrary Loads to Info.plist

I have tried all those methods, finally I restart my wifi router, now it's solved amazingly, and it's weird.

In my case.I've rewritten the IP address in file 'RCTWebSocketExecutor.m' ,but it doesn't work锛宎nd i provide the examination method according to the official website.There is no problem. But锛乄hen I switched to a wireless network, it worked! I don't konw why.

I solved problem by kill the 8081 theard.first close your app package ,and use lsof -i:8081 in your terminal,and kill -9 your theard.

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

Same issue with version 0.55.4. can't connect iOS device. Works fine on android.

I solved problem by kill the 8081 theard.first close your app package ,and use lsof -i:8081 in your terminal,and kill -9 your theard.

@lwt001no1 Can you elaborate this? Also did your phone and mac both are in same wifi or not?

Same problem, I can't get the app running on my real iPhone - no issues on simulators - I didn't test on a real Android phone.
Tested with RN 0.58.4, 0.58.6 and 0.59.3 with React 16.8.3, tried several suggestions like #21030
Both my mac and iPhone have access to internet on the same home wifi box, no specific router or configuration.
Documentation from the website is outdated btw, which does not help.

OS: macOS Mojave 10.14.3
iOS: 12.1.4
Node: 11.11.0
Xcode: 10.1

I have been running into the same problem, I have tried all the suggested changes and still not able to run on an iOS device.

OS: macOS Mojave 10.14.3
iOS: 12.1.4
Node: 11.11.0
Xcode: 10.1

Both my mac and iPhone have access to the internet and the document is pretty much outdated

I ran into the same problem today. Spend a few hours on it and finally got it working. There are a few solutions here which pointed me in the right direction: https://github.com/facebook/react-native/issues/21030

  1. Make sure the app is using the IP address of your machine, so not localhost, but something like 168.192.x.x or 10.0.x.x. So make sure your AppDelegate.m passes it correctly: https://github.com/facebook/react-native/issues/21030#issuecomment-496016606
  2. If you have your Chrome debugger open, and notice a cors error, switch to React Native Debugger, as that debugger has cors issues fixed (https://github.com/facebook/react-native/issues/21030#issuecomment-497246495)

Those 2 steps did it for me

馃憤

I ran into the same problem today. Spend a few hours on it and finally got it working. There are a few solutions here which pointed me in the right direction: #21030

  1. Make sure the app is using the IP address of your machine, so not localhost, but something like 168.192.x.x or 10.0.x.x. So make sure your AppDelegate.m passes it correctly: #21030 (comment)
  2. If you have your Chrome debugger open, and notice a cors error, switch to React Native Debugger, as that debugger has cors issues fixed (#21030 (comment))

Those 2 steps did it for me

馃憤

@jvandenaardweg your case, both mac and iphone connected in same network? mine is different, i dont have chrome debugger running. still same issue persist.

See #25460 - I found that the build script was not including the right IP address and thus the physical iPhone could not connect to the server.

I found that if I deleted the app from the iphone and rebuilt it then it connected to the debugger.

I'm trying so hard in 3 days and for God's sake just TURN OFF THE FIREWALL :'(((

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Was this page helpful?
0 / 5 - 0 ratings