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

[kostandinang]

After upgrading to RN 0.21.0 I encounter the following error:

Unable to connect with remote debugger

onFailure
DevSupportManagerImpl.java 593

npm module version: 0.21

When switching back to 0.20 it works ok, Any idea ?

[Kureev]

Looks like a regression, @mkonicek

[taypo]

I can confirm this issue. I'm on windows + android device over wifi, debugging broke after upgrading to 0.21. Downgrading to 0.20 works.

[rreusser]

In case it's relevant, Genymotion + "Debug in Chrome" resulted in this error for us. Error seems to be present in 0.21, 0.22-pre, and master. Downgrading to 0.20 fixed it.

[jedlau]

This also happens on iOS with the simulator. Downgrading to 0.20 worked.

[alexprice1]

I see this issue on react-native 0.21, but only on android :-(

[hufeng]

yes, my nuclide editor also can not connect with remote debugger.

[Hamiltontx]

Same here. Downgrading now.

[alexprice1]

Downgrading worked for me. I'm wondering if the way I upgraded was wrong?

Sent from my iPhone

On Mar 16, 2016, at 11:57 AM, Hamiltontx [email protected] wrote:

Same here. Downgrading now.

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub

[vladp]

+1. Same issue for me
Linux or windows -- same problem

This is also reflected on Stackoverflow
http://stackoverflow.com/questions/35973511/react-native-0-21-android-remote-debugger-chrome-cannot-connect

[mkonicek]

It looks like it happens on Android (Linux, Windows too?), and also iOS (Mac OS)?

I tried with 0.22.0-rc on Mac OS with and Android app but couldn't repro, selecting "Debug JS" opens the Chrome debugger and I can set breakpoints.

[rulatir]

I have the bad luck of running into this issue at my Hello World stage wrt React Native. How do I "downgrade to 0.20.0"?

I have installed react-native-cli and created a project with react-native init Hello

and this created the Hello directory with package.json specifying "react-native": "^0.21.0". I tried changing it to "0.20.0" and re-running react-native run-android, but it didn't resolve the issue nor did it seem to download and install the lower version (I would have noticed because I have a slow connection).

How do I downgrade properly?

[taypo]

Run npm install after modifying package.json.

[letharion]

Same here. Linux, genymotion, debugging android application fails on 0.21. Downgrading to 0.20 fixes the issue.

[letharion]

As far as I can tell, this has been resolved in 0.22. Now works well for me.

[chirag04]

I can confirm it's working on master as well.

@facebook-github-bot close

[taypo]

Tested with 0.22.2 on win7, still not working.

[letharion]

@taypo I think you should open a new issue then, as this one is about 0.21 and has been confirmed fixed twice. What you're seeing is probably a different issue.

[miknonny]

I have been hitting my head against the wall for the past 24hrs. even dreamt of this issue. I thought i broke something. will try to upgrade but i fear something else will just break again but i have to.

[vladp]

Tested with 0.22.2 . Still not working

E/unknown:React: Unable to connect to remote debugger
com.facebook.react.bridge.WebsocketJavaScriptExecutor$WebsocketExecutorTimeoutException: Timeout while connecting to remote debugger

                                                                         at com.facebook.react.bridge.WebsocketJavaScriptExecutor$3.run(WebsocketJavaScriptExecutor.java:146)
                                                                          at android.os.Handler.handleCallback(Handler.java:739)
                                                                          at android.os.Handler.dispatchMessage(Handler.java:95)

Win 10 / Android API 22
cleaned node_module directories

used to work 0.20

[jbrodriguez]

Not working with 0.22.2
OSX, Android Stock Emulator

[naeemulhaq1]

Has this been fixed in a later version or 0.20 is the last know good release? Thanks.

[rreusser]

@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. :smile:

[taypo]

I can confirm that it is working in 0.23.1. (But hot reloading is not)

[christophermark]

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

[ferologics]

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

[mkonicek]

@taypo, @christophermark, @ferologics What OS are you using (Linux, Windows, Mac)?

[christophermark]

@mkonicek I've got this working on 0.23.1 on Windows 10 with a Genymotion emulator running android 6.0.

I've also got the debugger working both on a simulator and on an Nexus 5 device running Android 6.0 on OS X El Capitan.

[ferologics]

OS X, el capitan

On Fri, 29 Apr 2016 at 04:49 Martin Konicek [email protected]
wrote:

@taypo https://github.com/taypo, @christophermark
https://github.com/christophermark, @ferologics
https://github.com/ferologics What OS are you using (Linux, Windows,
Mac)?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/6390#issuecomment-215691304

Frantisek Hetes, iOS Developer, Makeschool student
_f.[email protected] f.[email protected] | @ferbini | makeschool.com
http://makeschool.com_

[coolguy001tv]

I am facing nearly the same problem. In my project, I choose rn 0.23.1 which got this problem(With win7 , android), too.
What is wired is that I have another project which is also rn 0.23.1, but it's ok...
So it seems that this problem is not so related with rn version?
Need to be solved.

[coolguy001tv]

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~

[vladp]

I still have this problem at 0.25 basically since 0.21 I cannot debug for last 3 months, on Windows 10 or Linux, API 23 or 22. Does not matter.
Keep getting "Unable to connect with remote debugger"

I am not sure why it stopped working. Can somebody chime in who has the following setup:

a) uses Android SDK
b) Android Emulator
c) _does not_ compile React-native him/her self.
d) uses react-native start to start up the packager and the start is defined as package.json
"start": "node_modules/react-native/packager/packager.sh",

preferably somebody who uses react-native-material kit.. although I doubt that it matters

[rreusser]

@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.

[igor-bv]

As for me this solved by next steps:

1. Enable remote debug on device/emulator. (must got error with unable to connect to remote debugger)
2. Open new debug tab in google chrome browser.
3. Reload JS on device/emulator, debugging must connect to new tab from step 2.

Tested on RN: 0.23.0, 0.24.0.
Seems that problem is in packager, when it tries to open new chrome tab

[vladp]

thx for quick replies. @bo4a10. I am now paying attention to the messages coming from the package
I am getting

The method /launch-chrome-devtools is deprecated. You are probably using an application created with an older CLI with the packager of a newer CLI. Please upgrade your application: https://facebook.github.io/react-native/docs/upgrading.html

How is this possible, that I am using deprecated stuff, if I did

rm -rf ./node_modules  and then
npm install --no-shrink-wrap

is it possible that some where I am not getting the update packager ?
my react-native-cli is at 0.2.0

[vladp]

So far I had tried to
a) Add maven { url "$...
to the node_modules/react-native-material-kit/android/build.gradle
It was not there before
(that's the library I use to suplement react).. my applicaiton is hybrid about 60% java, 40% react stuff.)

Now the build.gradle for the react-native looks like this

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.1.0'
    }
}

apply plugin: 'com.android.library'

android {
    compileSdkVersion 23
    buildToolsVersion '23.0.3'

    defaultConfig {
        minSdkVersion 17
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_7
        targetCompatibility JavaVersion.VERSION_1_7
    }
}

repositories {
    mavenLocal()
    jcenter()
    mavenCentral()
}

dependencies {
    provided 'com.facebook.react:react-native:0.+'
}


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"
        }
    }
}

b) I had replaced in my package.json

"scripts": {

    "start": "node_modules/react-native/packager/packager.sh",

}

with

"scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
}

Neither one of the changes had helped sofar. And I am still seeing the

The method /launch-chrome-devtools is deprecated. You are probably using an application created with an older CLI with the packager of a newer CLI. Please upgrade your application: https://facebook.github.io/react-native/docs/upgrading.html

in the command window every time I tried to lauch the debugger with Ctrl+M from the emulator.

So still no luck. May be facebook stetho libraries are causing the problem... but I had them before
Here is the list of libraries I am using on the Java side

libraries = [
        supportVersion      : "23.0.1",
        dagger              : "2.0.2",
        rxjava              : "1.1.0",
        rxandroid           : "1.1.0",
        retrofit            : "2.0.0-beta2",
        butterknife         : "7.0.1",
        recycler_animators  : "2.1.0",
        javax_annotation    : "10.0-b28",
        glide               : "3.6.1",
        react_native        : "0.20.1",
        timber              : "4.1.2",
        leakcanary          : "1.4-beta2",
        okhttp3             : "3.2.0",
        okhttp              : "2.5.0",
        stetho              : "1.3.1",
        stetho_okhttp       : "1.3.1",
        stetho_timber       : "1.3.1",
        crashlytics         : "2.5.5",
        circleimageview     : "1.3.0",
        gson                : "2.6.2"
    ]

[igor-bv]

@vladp, I updated RN to 0.25.0, and upgraded local cli to 0.2.0, and if I start chrome debugging in simple way(choose Debug JS Remotely in dev tools menu) it doesn't work as it was. But if I open chrome debug tab manualy - it connects to it and I can debug

[coolguy001tv]

Have u ever tried repack your apk? Cuz last time I met the warning You are probably using an application created with an older CLI with the packager of a newer CLI., I just pack my apk again and it never shows again.

[vladp]

@bo4a10 I am sorry, I did not understand.
When I go to Chrome and, for example, type chrome://inspect/#devices
I can see my application, because use Facebooks Stetho Timberlog.

myApp (powered by Stetho)
inspect

And that let's me see on chrome browser my Java's Timber.d("...") logs.

But that's not enough for me. I need to see the console log and the be able to setup debug breakpoints in my react-native. Just like was able to do prior to 0.21.

I asked this before, but it does not seem like the Facebook stetho and The react-native debugger conflict to each other... may be I am wrong and they some how conflict (I do not know how to disable stetho easily)

Is there a Debug JS Remotely somewhere in Chrome that I am not seeing?

@coolguy001tv I just do Run | Run 'app' from the Android studio menu (I am on the latest android studio 2.1.1
Is there way to repackge apk manually?

[igor-bv]

@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]

@bo4a10
Thx for the explanation above.
Unfortunately I do not see Debug JS or Debug JS Remotely. I see Chrome Debugging. And that's what I keep clicking.
See my screen shot attached

[vladp]

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

[almost]

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.

[vladp]

@almost If you are having old entries for react-native in app.iml , that most likely means that Android Studio cannot find the react-native directory pointing by the url

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

Because the iml file is generated by Android Studio (or its gradle integration plugin) from build.gradle. What is really problematic, is that you will not get _any_ errors from Android Studio or gradle -- if the url pointing to react-native is wrong. Instead, the build process will use some old version of react-native. In my case it was pulling 0.21 -- and I could not for the life of me, figure that out.. It took me really long time, unfortunately.
So check your url directory to make sure it points to correct react-native directory under node_modules, and then your .iml files should have the correct react-native , automatically

[ghost]

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.

[cinder92]

same issue here with RN 0.36 :s

[slashhuang]

same issue here with RN 0.38, someone can resolve this issue?

[ghost]

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

[aachowhan]

RN .37, same issue.

jhabdas Your solution worked for me! I just opened up a tab in Chrome and went to http://localhost:8081/debugger-ui

It's working now!

[ericvicenti]

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

[ghost]

[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.

[loloof64]

@jhabdas Your solution worked for me, but having a standard laptop + ubuntu. Thanks :smiley:

[ghost]

@ericvicenti this is clearly still a problem. Could you please respond to my previous question and/or reopen this issue? Thanks

[u-kan]

This happens to me on only android in following environment and solution from @jhabdas does not work for me .

React native 0.43.3
gradle version 3.3
android plugin version 2.3.1
android studio version 2.3.1

hope I can get some news from you guys! thanks for taking a look.

[rjloura]

On linux I ran into this issue because it was trying to launch chrome with the command google-chrome I only had chromium installed, so I used created a symlink in /usr/bin/ like:

google-chrome -> chromium-browser

[ghost]

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

[chrisahardie]

FWIW, I had both Chrome and Canary installed on my machine, and the debugger would always open in Canary (even though Chrome was my default browser)

I started getting this error, and noticed that for whatever reason I couldn't launch Canary, it would just die. Uninstalled Canary, and Chrome stepped up for remote debugging.

[fredbt]

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 :)

[fredbt]

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)

[klvs]

Suffering from this in react-native 42.3. I've tried all of the above workarounds. Simply can't connect to the packager despite being on the same network. Makes working with a real device very painful.

[garan82]

I got similar error that @fredbt got

Uncaught TypeError: Cannot set property 'volume' of null
at Object.render (debugger-ui:92)
at Object.setState (debugger-ui:46)
at WebSocket.ws.onopen (debugger-ui:150)

I'm using CRNA with Expo 20 and React Native 0.47 :(

[ruler47]

@garan82
any solution?

[garan82]

@ruler47 sorry no, I gave up :(

[BarthesSimpson]

Having this same issue now

[freekvdp]

Is there any solution? I'm running into this issue on android real phone...

[arnabrahman]

I am running into same problem. Sometimes it works, sometimes it does't. Frustrating

[maacaro]

Hi every body I have the same issue any solution?

[RaddyJ]

Hello maacaro

At this point the most likely cause of the error is "regression". Especially if the OnFailure is in 'DevSupportManager'.

Try upgrading your Chrome browser to the latest before you try anything else, it will likely fix your issue (assuming you are also running the latest version of RN).

Cheers

[chenop]

Found that on StackOverflow and it worked for me:

1. run

adb reverse tcp:8081 tcp:8081

1. reload app

[pranavansp]

It's works awesome. No need to run any commands. Check my answer.

https://stackoverflow.com/questions/40898934/unable-to-connect-with-remote-debugger/50258218#50258218

[LC-prog]

@igor-bv
I used the steps as listed by @igor-bv in 2016 and it worked for me on RN v55.4

Thanks a bunch

[iozeen]

If someone still faces this issue with chrome, I hard reloaded page with empty cache and it worked for me.