Unable to connect with remote debugger
AndroidReactjsReact NativeAndroid Problem Overview
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
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
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!
Solution 3 - Android
I solved it doing adb reverse tcp:8081 tcp:8081
and then reload
on my phone.
Solution 4 - Android
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.
Solution 5 - Android
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/
Solution 6 - Android
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.
Solution 7 - Android
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
Solution 8 - Android
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.
Solution 9 - Android
- 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 )
Solution 10 - Android
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 🚧"
Solution 11 - Android
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
Solution 12 - Android
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!
Solution 13 - Android
in my case it also need to install it's npm package
so
npm install react-native-debugger -g
Solution 14 - Android
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
Solution 15 - Android
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
Solution 16 - Android
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