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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

in my case it also need to install it s npm package  so  npm install react-native-debugger -g

User · Answer

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 amp dev true amp 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

User · Answer

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

User · Answer

Solved the issue following    Press Cmd   M on emulator screen Go to Dev settings  gt  Debug server host  amp  port for device Set localhost 8081 Rerun the android app  react-native run-android   Debugger is connected now

User · Answer

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 - gt  write  ipconfig  - gt  copy IPv4 address

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

The other answers here were missing one crucial step for me  In AndroidManifest xml I needed to add usesCleartextTraffic        lt application                 android usesCleartextTraffic  true  gt    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

User · Answer

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

User · Answer

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

[android] Unable to connect with remote debugger

Examples related to android

Examples related to reactjs

Examples related to react-native