In case you haven't figured it out yet, debugging in mobile is "sub-optimal". (Whatever you do - don't do a Google Images search on sub-optimal.) Brian Leroux has an epic presentation on the topic and I highly encourage taking a look through it. I thought I'd share how I'm debugging in PhoneGap and Android right now.
To be clear - this is a sucky way of doing it. "Sub-optimal" is being too nice. Whenever possible I do as much work as I can on the desktop. But when I get desperate and need to test something on a device, I end up resorting to console.log messages. I know this is only one step better than a bunch of alerts, but I thought it might be useful to show how this is done with Android and some tips to make it a bit more palatable.
First - I assume that you are actually using the Android SDK to create your APK files and install. What I'm going to show will work if you use Build to generate your APK, but the tool comes from the SDK. Open up your SDK folder, go into the tools subdirectory, and run "ddms". This stands for "Dalvik Debug Monitor." Here's a screen shot. Notice it has my device in the upper left hand corner.
You will also notice an ungodly amount of messages in the main log panel. This is everything your device is doing. Everything. We'll filter that in a second.
So start up your application, and you should notice the process is now listed below the device. My application had an ID of com.camden.bare, and this is what shows up when I run it.
The first thing you want to do is create a filter. In order to actually see your messages in all the noise your device is generating, you need to create a filter by hitting the pretty little green plus sign.
In the form that pops up, give it any name you want, but be sure to use the 'by Log Tag' field and specify "Web Console":
Ok, at this point, you can now see messages when your application makes use of console.log. Consider this simple PhoneGap/Camera application:
I've got a few console messages for my events. They aren't incredibly helpful, but they let me know things are progressing as I expect. Here's a quick example:
What's cool is that it will also log unexpected errors for you. I wish I could say I planned this, but I did make a mistake in my "simple" little application and I saw it immediately in ddms:
In general, that's it, but here are a few more tips to keep in mind:
I find that I have to click on my filter to 'refresh' the list view. Remember that if you don't see the panel updating.
console.dir "works" in that it prints out to the log, but it's not a nice interactive tree like you see in Firebug. If you use that on a complex object, or even console.log, you pretty much end up with [object Object]. Instead, use JSON: console.log(JSON.stringif(something));
If you make use of the tip above and find that log message is super long and hard to read, then mouse over the log line and wait. A tooltip will appear with the message in a smaller, easier to read format.
I hope this helps. Again - I'm not putting this out as a great way to debug. It "works" now but could certainly be a heck of a lot better.
Archived Comments
I have never used this before :) I will have to give it a shot.
I usually end up using the debug in build with weinre it make it really simple to just build and test it our online.
Thanks for the info though I will have to give this a shot because weinre can be a little buggy with IOS for some reason
If you use PhoneGap:Build there is an option to enable debugging, which embeds Weinre in your application. Then you simply click the "debug" button on your application's page (in PG:B) and that opens up the computer-side of the Weinre session. Boom, console'd.
I've had no luck with Weinre and Android on Windows, but I know it works wonders for others. I don't believe though that you can do console debugging, can you?
Ah so console does work? I thought just the DOM stuff worked.
Yeah, I thought I remembered testing this. You don't get console.log messages in it. You get a console, and I assume you can manually do things, but you don't get logging.
I use the logging almost every day. You definitely get console.log messages in the console when you let PG:B inject Weinre into your app for you.
Maybe it's not "stock" Weinre (so if you're doing it manually), but whatever they're doing when I enable debugging in PG:B, I get console.log messages.
Ah, I was using Weinre via Shadow, not via the script include. I've only had luck with Weinre via Shadow, never via injection - or not reliably. Again though, I've heard on OSX it works perfectly fine.
Maybe that's it, I'm on OSX. It's really easy to use in PG:B, you just check a box and it re-builds your app with weinre included, and then there's a link on the site to open up the debug console.
Yep.. i was struggeling alot when I started "porting"to iPhone..
It showed up that it failed on a console.info message..
This is what I found:
// NOTE.. iOS only support Log,Error,warning
// Android supports Log,Error,Warning,Info,Debug
I'm testing on a chrome-default-browser device (moto g) and the console tag is "chromium", not "Web Console".
Thanks!
Thank you!
Hi,
If i want to get console.og on command prompt of mac, so is there any command for that.
Regards
Shivam
Maybe via Android's command line tools. I know you can monitor it via the "monitor" app which probably has a CLI back end.
'monitor' ,is this application ?
Oh it's just one of the Android SDK tools.