Twitter: raymondcamden


Address: Lafayette, LA, USA

Apache Cordova 3.3 and Remote Debugging for Android

01-02-2014 21,473 views Mobile 20 Comments

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.

20 Comments

  • Commented on 01-02-2014 at 5:31 PM
    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!
  • Tolu #
    Commented on 01-03-2014 at 1:40 AM
    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
  • Commented on 01-03-2014 at 9:06 AM
    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/shard/s3/sh/c7a7acc7-af2d...
  • Tolu #
    Commented on 01-03-2014 at 3:32 PM
    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?
  • Commented on 01-03-2014 at 3:48 PM
    Not sure. I've not tested that aspect yet. You are doing a real network request, right? Like an AJAX hit?
  • Ben Wilson #
    Commented on 01-08-2014 at 3:35 PM
    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/webstore/detail/dpngiggd... 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.
  • Commented on 01-09-2014 at 7:07 AM
    Good point Ben. I didn't really do a good job of explaining the entire feature - just showing that it worked with Cordova/PhoneGap. :)
  • Ram #
    Commented on 01-20-2014 at 12: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.
  • Commented on 01-20-2014 at 4:20 PM
    It should just work. Did you try adding a breakpoint?
  • Ram #
    Commented on 01-21-2014 at 1:06 AM
    tried with weinre all i get is console.log values
  • Commented on 01-21-2014 at 5:29 AM
    Um... but we aren't discussing weinre. We are talking about Chrome Remote Debugging.
  • Commented on 03-24-2014 at 5:32 AM
    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?
  • Commented on 03-24-2014 at 5:35 AM
    Yep - exact same thing pretty much. See: http://css.dzone.com/articles/overview-mobile-debu...
  • Sam #
    Commented on 05-19-2014 at 11:37 AM
    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.
  • vzhen #
    Commented on 06-04-2014 at 1:58 AM
    how to enable this debugger for android avd?
  • vzhen #
    Commented on 06-04-2014 at 2:06 AM
    I got it. it is under chrome://inspect
  • vzhen #
    Commented on 06-04-2014 at 2:10 AM
    I got a problem. I went to dom and modify but it doesn't change in the emulator
  • Commented on 06-04-2014 at 9:43 AM
    Not sure what to suggest. It works for me. Can you do other things like execute JS in context of the app?
  • Ben Wilson #
    Commented on 06-17-2014 at 4:38 PM
    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.
  • Commented on 06-17-2014 at 5:08 PM
    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.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty