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

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 15
  • Comments: 27 (1 by maintainers)

Most upvoted comments

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

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

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

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

“react”: “16.3.1”, “react-native”: “0.55.2”

Windows 10

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

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

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

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