Unable to connect with remote debugger

Question

I'm using React.JS and when I do react-native run-android (with my device plugged in) I see a blank page. When I shake the device and select Debug JS Remotely from the option list I see the following screen.

FYI:

OS: Ubuntu 16.04
Node version is: v4.6.2
java version "1.8.0_111"
react": "15.4.1
react-native": "0.38.0

On Android you need to run in a separate window `react-native start` to start the server. — Aleksandar Popovic, Dec 01 '16 at 00:31
What about changing this : `compile "com.facebook.react:react-native:+"` on compile section. — Satan Pandeya, Dec 01 '16 at 05:22

score 286 · Answer 1 · answered Feb 27 '18 at 07:30

286

In my case the issue was that the emulator was making a request to:

http://10.0.2.2:8081/debugger-ui

instead of:

http://localhost:8081/debugger-ui and the request was failing.

To solve the issue: Before enabling remote debugging on your emulator, open http://localhost:8081/debugger-ui in chrome. Then enable remote debugging and go back to the chrome page where you should see your console logs.

answered Feb 27 '18 at 07:30

DannyMoshe

6,023
4
31
53

1

worked for me--thx! did you find a way to set it to always try to connect to localhost to avoid having to open chrome tab first? – izikandrw Mar 01 '18 at 21:50
28

You can go into the Dev Settings (Ctrl +M) on your emulator and change the debug server to 'localhost:8081'. – DannyMoshe Mar 02 '18 at 22:10
Last paragraph is the only thing that worked for me. – Pedro Otero Mar 11 '18 at 21:55
3

Thank you. How does it get set to 10.0.2.2 in the first place? – charlieb May 14 '18 at 17:47
3

A request to 'localhost' made from your emulator would try to access the loopback port on the emulator, not on your PC (you want the loopback of your PC). To resolve this, android creates the alias 10.0.2.2 to allow you to access services running on your PC (see https://developer.android.com/studio/run/emulator-networking for doc reference). As far as why the request fails im not sure, but it seems that it is a documented issue with react/android see https://github.com/facebook/react-native/issues/17970. – DannyMoshe May 14 '18 at 22:29

Sajib Khan · Answer 2 · 2019-08-25T14:06:06.167

193

Solved the issue following:

Press Cmd + M on emulator screen
Go to Dev settings > Debug server host & port for device
Set localhost:8081
Rerun the android app: react-native run-android

Debugger is connected now!

edited Aug 25 '19 at 14:06

answered May 02 '18 at 08:38

Sajib Khan

22,878
9
63
73

For those of you who have a problem with the CMD + M button not working, I used './adb shell input keyevent 82' in the shell where adb is located to trigger it. The shortcut keys started working after that! – Jeff L Jul 12 '18 at 03:34
*YOU* sir are a bloody legend. x – Aid19801 Sep 28 '18 at 19:07
1

Now it's just trying to connect to remote debugger... for eternity – Fakebounce May 14 '19 at 15:10
Neither Cmd + M working nor ./adb working how can I connect with debugger? – Chandni Jan 27 '21 at 09:57

score 45 · Answer 3 · answered Dec 01 '16 at 09:33

45

I solved it doing adb reverse tcp:8081 tcp:8081 and then reload on my phone.

answered Dec 01 '16 at 09:33

splunk

6,435
17
58
105

Tom Aranda · Answer 4 · 2017-12-14T21:35:14.307

In my case, selecting Debug JS Remotely launched Chrome, but did not connect with the android device. Normally, the new Chrome tab/window would have the debugging URL pre-populated in the address bar, but in this case the address bar was blank. After the timeout period, the "Unable to connect with remote debugger" error message was displayed. I fixed this with the following procedure:

Run adb reverse tcp:8081 tcp:8081
Paste http://localhost:8081/debugger-ui into the address field of my Chrome browser. You should see the normal debugging screen but your app will still not be connected.

That should fix the problem. If not, you may need to take the following additional steps:

Close and uninstall the app from your Android device
Reinstall the app with react-native run-android
Enable remote debugging on your app.
Your app should now be connected to the debugger.

Tom...thank you! Before this I set my ip address ("Dev Settings" -> "Debug server host for device") x.x.x.x:8081 — atreeon, Dec 12 '17 at 16:32

score 11 · Answer 5 · answered Jan 14 '19 at 23:28

I had a similar issue that led me to this question. In my browser debugger I was getting this error message:

Access to fetch at 'http://localhost:8081/index.delta?platform=android&dev=true&minify=false' from origin 'http://127.0.0.1:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It took me awhile to realize I was using 127.0.0.1:8081 instead of localhost:8081 for my debugger.

To fix it, I simply had to change Chrome from:

http://127.0.0.1:8081/debugger-ui/

to

http://localhost:8081/debugger-ui/

actually for me was the opposite. But in reality "localhost" usually is equivalent to 127.0.0.1. It depends on what is set for address as localhost. Always better to be explicit though — Carmine Tambascia, Jul 15 '19 at 07:05

score 3 · Answer 6 · edited Dec 13 '17 at 07:24

3

My case is that when I tap enable remote JS debugging, it will launch chrome, but can not connect to it.

I have tried to run:

adb reverse tcp:8081 tcp:8081

, did but not work.

I uninstalled my chrome totally and install a new one. And it works.

edited Dec 13 '17 at 07:24

Amir

1,348
3
21
44

answered Dec 13 '17 at 06:31

Steven Fang

135
6

score 3 · Answer 7 · answered Jan 05 '20 at 08:37

The other answers here were missing one crucial step for me. In AndroidManifest.xml I needed to add usesCleartextTraffic:

    <application
      ...
      android:usesCleartextTraffic="true">

You probably don't want to keep this in the production release of your app though, unless you want to support insecure http requests.

After I added this to my AndroidManifest.xml, then I followed Tom Aranda's answer, and the emulator was finally able to connect to the debugger.

score 2 · Answer 8 · answered Dec 01 '16 at 05:06

2

Make sure that the node server to provide the bundle is running in the background. To run start the server use npm start or react-native start and keep the tab open during development

answered Dec 01 '16 at 05:06

Chethan N

1,110
1
9
23

2

Still doesn't work. Neither terminal return me errors – splunk Dec 01 '16 at 07:31
1

Are you running any proxy server or proxy software like charles...Stop them if any – Chethan N Dec 01 '16 at 07:40
No, I'm not running any proxy – splunk Dec 01 '16 at 07:44

score 1 · Answer 9 · answered Mar 19 '19 at 16:14

react-native start --reset-cache in one tab and react-native run-android in another
adb reverse tcp:8081 tcp:8081 ( so you could add it to your scripts and just run yarn run adb-reverse)
If you're using android, Instead of shake your phone a great tip is run adb commands.

So you can run:

adb shell input keyevent 82 (menu option )
adb shell input keyevent 46 46 ( reload )

score 0 · Answer 10 · answered Jan 11 '19 at 12:09

0

I did @sajib s answer and used this script to redirect ports:

#!/usr/bin/env bash

# packager
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081

echo " React Native Packager Redirected "

answered Jan 11 '19 at 12:09

Thom

524
1
6
12

score 0 · Answer 11 · answered Mar 12 '19 at 15:19

0

uninstall your application, then run react-native run-android. then click debugging end in chrome replace http://localhost:8081/debugger-ui/, end run react-native run-android. if you still haven't succeeded try again

answered Mar 12 '19 at 15:19

muhyidin

189
2
7

AbdolHosein · Answer 12 · 2019-05-08T20:03:43.827

Inculding all impressive answers the expert developers specially Ribamar Santos provided, if you didn't get it working, you must check something more tricky!

Something like Airplane mode of your (emulated) phone! Or your network status of Emulator (Data status and Voice status on Cellular tab of Emulator configuration) that might be manipulated to don't express network! for some emulation needs!

I've overcome to this problem by this trick! It was a bit breathtaking debug to find this hole!

score 0 · Answer 13 · answered Jul 15 '19 at 13:16

0

in my case it also need to install it's npm package

so

npm install react-native-debugger -g

answered Jul 15 '19 at 13:16

TheEhsanSarshar

2,677
22
41

score 0 · Answer 14 · answered May 19 '20 at 22:05

Try adding this

package.json

devDependencies: {
//...    
    "@react-native-community/cli-debugger-ui": "4.7.0"
}

Terminate everything.

npm install
npx react-native start
npx react-native run-android

Reference: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917

score 0 · Answer 15 · answered Feb 02 '21 at 16:33

Trouble shooting React native with React Cli and Typescript/js (Android Emulator)

Check if 'android/src/mai/assets/index.android.bundle' is available. If no Create index.android.bundle file in 'android/src/main/assets'
If above path not available then create the path then file 3.Run for bundling : react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

4.a. By default development server runs on 8081 port. Run 'react-native start' then on browser check if 'http://localhost:8081' and 'http://yourIP:8081' works. If yes then Open application in Android Emulator (react-native run-android)

Click Ctrl + M
Select Settings
Select Debug Server Host and Port For Device
Add 'YourIPAddress:8081' e.g. 10.0.2.2:8081

4.b If http://localhost:8081 not working then run react-native port=8088(or any port)once successfully executed. Check on browser http://localhost:8088 and http://yourIP:8088 works. Yes then Open application in Android Emulator (react-native run-android)

Click 'Ctrl + M'
Select Settings-
Select Debug Server Host and Port For Device-
Add 'YourIPAddress:8081' e.g. 10.0.2.2:8088

YourIPAddress : Open command promt -> write 'ipconfig' -> copy IPv4 address

Anthony phillips · Answer 16 · 2021-10-17T05:08:37.043

0

As for my own case , i was using the expo go and my android phone for my emulator and it was giving me this error.

so what i did was to clear the expo go app cache & data on my android device. it was working just fine

edited Oct 17 '21 at 05:08

answered Jul 07 '21 at 16:07

Anthony phillips

152
3
13

score 0 · Answer 17 · answered Nov 15 '22 at 18:00

TL;DR: If you created the app with expo cli with some native code or libraries not supported by expo, try this command in case the other solutions do not work.

npx expo run:android

Docs

My scenario:

I tried to run one of my old expo applications by building the app from Android studio and faced this issue. The other solutions mentioned didn't work. When I tried to use Expo Go to scan the QR, I got to know the error. Since I had used react-native-mmkv, I couldn't use expo-cli, I had to eject. So I ran npx expo run:android and everything started working fine.

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 18 '22 at 10:40

score 0 · Answer 18 · answered Nov 29 '22 at 11:05

0

The solution is to clear the expo go application data to solve the problem. Ref to: How to disable Remote JS Debugging in React-Native

answered Nov 29 '22 at 11:05

mohamed larbi gharib

36
2

Unable to connect with remote debugger

18 Answers18

Linked