Apache Cordova 3.3 and Remote Debugging for Android

This post is more than 2 years old.

A few weeks ago Apache Cordova 3.3.0 was released (you can read the details here) and one of the things that caught my eye was this:

CB-5487 Enable Remote Debugging when your Android app is debuggable.

Chrome Remote Debugging is a cool feature, but so far it had not been available with PhoneGap apps. I can confirm that with a Cordova 3.3.0 project, this works great. I made a virgin project, launched it (in the emulator), and it showed up right away as a debuggable device. (Note that your emulator has to be using Android 4.4 or higher.)

And just to prove it works, I went into the DOM, modified it, and it showed up live in the app itself.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Adam Harris posted on 1/3/2014 at 4:31 AM

This is fantastic news! Weinre was never that easy to setup and never that easy to use. It's like a stripped down and buggy version of Chrome Dev tools. I can't wait to try this out instead!

Comment 2 by Tolu posted on 1/3/2014 at 12:40 PM

Hello Raymond, thanks for pointing this feature out! Would you please share your AVD configurations here. I can't get the emulator to start with platform 4.4 even with 256 memory on Windows. I'm stuck on the Android animated startup screen for like ever.
Thank you

Comment 3 by Raymond Camden posted on 1/3/2014 at 8:06 PM

I believe the only thing I tweaked was storage, but here is a screen shot of my SDK. I should point out that it is slow as heck so it needs some tweaking. (Then again, most of my Android emulators are slow as heck compared to iOS.)

https://www.evernote.com/sh...

Comment 4 by Tolu posted on 1/4/2014 at 2:32 AM

Thank you Raymond, it's working now but just as slow as you described. I noticed the 'Network' tab of the devtools does not seem to reflect any activity while inspecting with the tools. Any work around for this?

Comment 5 by Raymond Camden posted on 1/4/2014 at 2:48 AM

Not sure. I've not tested that aspect yet. You are doing a real network request, right? Like an AJAX hit?

Comment 6 by Ben Wilson posted on 1/9/2014 at 2:35 AM

This is going to be so useful! On Chrome 31 on Windows I had some difficulty finding the list of debuggable devices as it didn't appear on Chrome's Tools menu as it seems to on the Mac. One way access is to enter chrome://inspect/ in the URL base. Another way is to install the ADB Chrome extension at https://chrome.google.com/w... and then click View Inspection Targets from the extension's icon.

Seems to work like a charm especially if you inspect a real Android 4.4 device connected via USB rather than the glacial emulator.

Comment 7 by Raymond Camden posted on 1/9/2014 at 6:07 PM

Good point Ben. I didn't really do a good job of explaining the entire feature - just showing that it worked with Cordova/PhoneGap. :)

Comment 8 by Ram posted on 1/20/2014 at 11:42 AM

Hi Raymond,

Thanks for the info, Is there any way i can see source code of the app through remote debugging, As i want to put breakpoints and debug.

Comment 9 by Raymond Camden posted on 1/21/2014 at 3:20 AM

It should just work. Did you try adding a breakpoint?

Comment 10 by Ram posted on 1/21/2014 at 12:06 PM

tried with weinre all i get is console.log values

Comment 11 by Raymond Camden posted on 1/21/2014 at 4:29 PM

Um... but we aren't discussing weinre. We are talking about Chrome Remote Debugging.

Comment 12 by Aravind posted on 3/24/2014 at 2:32 PM

Great news, I just need to get a Kitkat device and am good to go. Do you know if there is anything similar (I realize there is no USB debugging on it) for iOS?

Comment 13 by Raymond Camden posted on 3/24/2014 at 2:35 PM

Yep - exact same thing pretty much. See: http://css.dzone.com/articl...

Comment 14 by Sam posted on 5/19/2014 at 8:37 PM

Aravind, just open up safari when you have your device connected/emulator running, click develop, and select your device. One thing though, it needs to be a debug build otherwise it won't work. Thankfully, iOS has supported this feature for quite some time.

Comment 15 by vzhen posted on 6/4/2014 at 10:58 AM

how to enable this debugger for android avd?

Comment 16 by vzhen posted on 6/4/2014 at 11:06 AM

I got it. it is under chrome://inspect

Comment 17 by vzhen posted on 6/4/2014 at 11:10 AM

I got a problem. I went to dom and modify but it doesn't change in the emulator

Comment 18 by Raymond Camden posted on 6/4/2014 at 6:43 PM

Not sure what to suggest. It works for me. Can you do other things like execute JS in context of the app?

Comment 19 by Ben Wilson posted on 6/18/2014 at 1:38 AM

One thing that wasn't obvious to me although it is mentioned in passing by CB-5487 is how to turn Chromes's remote debugging off when you want to ship your App.

To do this just set android:debuggable to false in your AndroidManifest.xml

Could be the reason why some folks haven't been able to get this working in the first place.

Comment 20 by Raymond Camden posted on 6/18/2014 at 2:08 AM

Interesting. I haven't run into this myself - but I don't do a lot of "real" work delivering apps - mainly proof of concepts. Thank you for sharing this, Ben.

Comment 21 by alex posted on 6/14/2015 at 1:44 PM

Wow OperaBrowser Have opera://inspect/#devices cool)

Comment 22 by Sundaravel M posted on 12/25/2015 at 10:26 AM

I tried GapDebug for debugging purpose & wrote article about GapDebug on this like http://phonegappro.com/tuto...