Debugging: Dev Tools launch to 10.0.2.2 instead of localhost

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

yes

Environment

Environment: OS: macOS High Sierra 10.13.3 Node: 8.7.0 Yarn: 1.3.2 npm: 5.6.0 Watchman: 4.7.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed) react: 16.2.0 => 16.2.0 react-native: 0.53.0 => 0.53.0

Steps to Reproduce

1. Run app on Android.
2. Turn on Debug mode.
3. Bundler says “Launching Dev Tools…” and it opens chrome to http://10.0.2.2:8081/debugger-ui, which hangs because the debugger is on localhost.

Expected Behavior

I expect the debugger to open Chrome to localhost:8081/debugger-ui as it always has before I upgraded to version 0.53.0.

Actual Behavior

As mentioned, it opens to http://10.0.2.2:8081/debugger-ui, which is inoperable. Nothing ever loads. The Devtools middleware has the wrong host for some reason.

Reproducible Demo

You can literally react-native init a new app right now, and it will do this. Here’s a package json of an app I just generated that has this issue

{
  "name": "testingtesting",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-native": "0.53.0"
  },
  "devDependencies": {
    "babel-jest": "22.2.2",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.3.0",
    "react-test-renderer": "16.2.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

It appears the app bundle is also being loaded from 10.0.2.2, but the debugger is not functioning at this host, which I’m guessing means that even if I navigate to a “working” debugger @ localhost, it’s still not going to work. Credit to #17910 for first assuring me I was not crazy and this was a real issue.

Edit: Complete shot in the dark here, but could it have something to do with fa574c6 ? (happy to pr this with some direction, although I know at least part of the issue is in a separate file where it is also incorrect about the host when launching chrome).

[perseyMudzinga]

Go to http://localhost:8081/debugger-ui/ . Then stop remote js debugging and run your react native app again. Finally debug js remotely. Has worked for me.

[sajibcse68]

I solved the issue by:

• 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!