React-Native：如何在真正的 iOS 设备上使用“远程 JS 调试器”？

Question

I'm wondering if react-native's Remote Debugger mode would be possible also on real device. But it stops me with an error page stating

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

The interesting fact here is that this URL won't also work on my developer machine.

Opening this URL ( http://localhost:8081/debugger-proxy?role=client ) in a browser on my developer machine with running packager.js will respond with:

Cannot GET /debugger-proxy?role=client

When I turn off Remote debugger, everything works as expected.

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

The application will fetch the source code from my local machine. In order to make this work, both, the iPhone-device and my iMac, are connected to the same WiFi.

The ReactNative-Application is executed on the iPhone as expected. With the shake-gesture I spawn the developer menu and select the option "Debug JS Remotely".

Now this error appears as mentioned above.

Following a side note in running-on-real device I changed the Host from localhost to the IP-Address of my Mac in RCTWebSocketExecutor.m, but this results in an endlos loop while fetching.

The Question is:

How can I use the Remote JS Debugging -Feature on real device?

Update

After further investigation I came to the conclusion that this might be a bug and opened the following issue on GitHub.

Answer 1

In chrome browser, I have changed

localhost:19001/debugger-ui

to

192.168.0.4:19001/debugger-ui

and it worked. Replace 192.168.0.4 with your ip address.

Answer 2

On iOS devices, open the file RCTWebSocketExecutor.m from react-native/Libraries/WebSocket/RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, (don't forget the correct port. eg: 192.168.1.6::8880) then select "Debug JS Remotely" from the Developer Menu.

NOTE: remove the app from your device, close the terminal that opened for creating bundle.js. finally press the Play button from your Xcode.

here is the official guide from react-native website:

Answer 3

We had a similar issue here in 2020 and now there is a better solution which is to update the IP of the target machine directly from the app. Be on the same wifi with both the computer and the device - even if they are connected with a USB.

1. Shake the phone to get the menu
2. Select Configure Bundler
3. Insert the IP of the computer
4. Press Apply Changes

Now you should get debug data on the computer.