react-native: RN 0.21.0 Unable to connect with remote debugger.

not working on 0.24.1, didn’t work on 0.23.x either…

For those just dropping in it’d be great to hear feedback on the workarounds listed above.

Seeing this issue on RN 0.19 on OS X 10.11.6 (15G31) in Genymotion and iOS simulator.

FWIW was not occurring on a different machine under same codebase running OS X 10.11.5 (15F34). But I was using Chrome 51.0.2704.106 (64-bit) on the other machine and Canary 54.0.2815.0 canary (64-bit) on the new one.

EDIT:

Two workarounds I found:

1. Install Google Chrome and set it default instead of Canary resolves the problem
2. Open http://localhost:8081/debugger-ui in the browser and then attempt to do the remote debugging.

Found that on StackOverflow and it worked for me:

1. run

adb reverse tcp:8081 tcp:8081

1. reload app

same issue here with RN 0.36 😒

This is super old and it looks like chrome debugging works in recent versions

I had the same issue and also saw the out-dated version of the debug menu. I had to fix it by editing android/app/app.iml and changing the line:

    <orderEntry type="library" exported="" name="react-native-0.24.1" level="project" />

To

    <orderEntry type="library" exported="" name="react-native-0.25.1" level="project" />

There was also one other line in that file that mentioned 0.24.1 which I changed to 0.25.1 but that didn’t seem to make a difference either way.

Success. Thx all for help. When @bo4a10 explicitly listed the menu items, I am supposed to see in Ctrl+M screen, it was clear that I was not getting the same screen. Therefore, I reasoned, that the problem has to be in the way my app Links to the react-native JAR.
Even though I had followed @coolguy001tv suggestion to examine my dependencies section and to include url $projectDir … , I had done that incorrectly. Essentially, I had left in my compile section compile "com.facebook.react:react-native:0.20+" And I think, what was happening, is that the build process was still puling the Maven JAR released last february when the whole debugging thing broke. Once I changed the above to compile "com.facebook.react:react-native:+" everything started working. In fact the first error I saw was in compilation, that there was no longer onPause, onResume methods. Instead they were replaced by onHostPause, and onHostResume. Unfortunately, the react documentation for 0.25 still shows the old onPause and onResume. https://facebook.github.io/react-native/docs/embedded-app-android.html#content

And I had consulted with that documentation earlier on, but because it was showing outdated APIs, it did not raise any alerts for me. So I missed that potential warning sign.

But it is working now. thx for all the help

This is what I see in the debugger window in th browser:

VM76:35 WebSocket connection to ‘ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome’ failed: Error during WebSocket handshake: Unexpected response code: 400

debugger-ui:92 Uncaught TypeError: Cannot set property ‘volume’ of null at Object.render (debugger-ui:92) at Object.setState (debugger-ui:46) at WebSocket.ws.onclose (debugger-ui:187)

This seems to be old but it’s happening to me now. It was working last friday, but after a reboot of my machine, every time I try to debug the JS remotely, a new tab is open in chrome, and the error message "Unable to connect with remove debugger. Expected HTTP 101 response but was ‘400 bad request’ shows up. If I try again, a new tab opens and the error repeats.

This is driving me crazy 😃

Sadly when we create new toys sometimes to make life seemingly easier, we in fact make it more complex.

I made a comparison between my projects which one is good and the other is bad. And I tried a solution to solve this.

1. find android/build.gradle, check if it’s like this:

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$projectDir/../../node_modules/react-native/android"
        }
    }
}

The most important codes are the maven rows which is the difference between my good project and my bad project. 2.react-native run-android to pack apk Then it’s ok for me.

By the way, I am using rn 0.23.1 with win7. I don’t know if it’s all right for everyone ,but it’s worth to try~

Working for me as well in 0.23.1. Was previously having connection issues to the debugger on Win 10 with Android devices.

[I]t looks like chrome debugging works in recent versions

How did you reach that conclusion?

@ericvicenti The larger OSS tools (e.g. Jekyll) I work with tend to tag their issues as stale before closing, giving the community some time to respond, and automate the process. It would be nice to see RN do the same.

@vladp I’ll explain step by step properly how I connect to JS chrome debugger.

1. Start your app on device/emulator
2. Open dev tools by shaking device or press CTRL+M on keyboard if u use emulator
3. In dev tools u must see first item - Reload JS, second item Debug JS or Debug JS Remotely(on latest v of RN). Press Debug JS or Debug JS Remotely. You must see red RN error Unable to connect to remote debugger…
4. Go to google chrome and open new tab with this url http://localhost:8081/debugger-ui, press F12 to see dev console in chrome
5. Come back to your device/emulator and press Reload JS.
6. Your app must connect to your tab in google chrome, and u must be able to see console.log() and set breakpoints

@vladp Does a brand new app work? The nuclear option seems to be to create a fresh app and copy over your app’s src files. Depending on the size/structure of your app a complete transfer may not be feasible, but as with @coolguy001tv’s diff strategy, it might help indicate the problem.

@naeemulhaque - I think it’s fixed in 0.23 at least. There will always be ways to get things to break, but seems maybe the consensus that if it’s broken in 0.23, maybe it’s no longer because of RN itself. 😄