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.
Archived Comments
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!
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
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...
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?
Not sure. I've not tested that aspect yet. You are doing a real network request, right? Like an AJAX hit?
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.
Good point Ben. I didn't really do a good job of explaining the entire feature - just showing that it worked with Cordova/PhoneGap. :)
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.
It should just work. Did you try adding a breakpoint?
tried with weinre all i get is console.log values
Um... but we aren't discussing weinre. We are talking about Chrome Remote Debugging.
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?
Yep - exact same thing pretty much. See: http://css.dzone.com/articl...
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.
how to enable this debugger for android avd?
I got it. it is under chrome://inspect
I got a problem. I went to dom and modify but it doesn't change in the emulator
Not sure what to suggest. It works for me. Can you do other things like execute JS in context of the app?
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.
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.
Wow OperaBrowser Have opera://inspect/#devices cool)
I tried GapDebug for debugging purpose & wrote article about GapDebug on this like http://phonegappro.com/tuto...