React-native 0.21 (android) remote debugger (Chrome) cannot connect

Viewed 5919

My remote debugging (Via Chrome with React-native dev tools 0.14.8) used to work fine.

I am not sure what exactly happened in between (I upgraded to react-native 0.21, did an update to android studio, updated Linux Mint 17.3 with apt-get update/ upgrade).

But now all I see is "Please Wait Connecting to Remote debugger" for about 5-8 seconds on my emulator, and then I get the error (see attached image): "Unable to connect with remote debugger"

I have tried re-installing Chrome React-native extensions. Tried rebuilding my app. Did not help. I am not exactly sure where the problem is. May be I just need to increase a value for connection timeout.. but there does not seem to be an option like that.

Below is also my package.json (it took a couple of days to go through the 0.20 to 0.21 upgrade, due to various dependency problems). May be there is a new settings there that I am missing, that somebody could point out.

{
    "name": "ftesting",
    "version": "1.0.0",
    "description": "ftesting desc",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node_modules/react-native/packager/packager.sh",
    "android-setup-port": "adb reverse tcp:8081 tcp:8080",

    "test": "eslint ./src/js.app/my.forms",
    "start": "rnws start",
        "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
        "postinstall": "npm run clean:babelrc"
    },
    "repository": {
    "type": "git",
    "url": "xyz"    },
    "keywords": [
    "ftesting"
    ],
    "author": "ls",
    "license": "MIT",


    "engines": {
    "node": ">=4",
    "npm": ">=2 <4"
  },

    "devDependencies": {


        "babel-eslint": "^6.0.0-beta.1",

    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",


        "eslint": "~2.2.0",
    "eslint-loader": "^1.1.1",
    "eslint-plugin-react": "^4.2.0"

    },


    "dependencies": {

    "react-native": "^0.21.0",

    "@remobile/react-native-splashscreen": "^1.0.3",

    "react-native-blur": "^0.7.10",
    "react-native-htmlview": "^0.2.0",


    "react-native-material-kit": "^0.3.0", 
    "react-native-material-design": "^0.3.3"
    }
}
4 Answers

This is for apps created with react-native init or ejected from expo. Start de app with:

react-native run-android

The emulator will show the red screen debugger connection error (that is why we are here in the first place).

With the emulator in focus press:

Ctrl+M

or from the shell issue:

adb shell input keyevent KEYCODE_MENU

The in app Developer Menu will appear:

Click in

Dev settings

Select the option:

Debug server host & port for device

And enter:

localhost:8081

Now we’ll make calls in port 8081 in the emulator go to the same port on the host machine. From the shell do:

adb reverse tcp:8081 tcp:8081

Ready, just restart the app

react-native run-android
Related