Android browser console

2011-02-12

So you're developing a website and want to see why the hell stuff breaks on the Android browser. So you figure, there must be a simple trick for it. No. Absolutely not. However, it's not impossible to see the console log output. Just rather impractical.

I had created a web app (unpublished) that used canvas to draw a key element of the app. But on Android, I didn't see anything, whilst on the desktop and on iOS things worked just fine. So I wanted to see what kind of error Android was throwing at me. That's when I discovered that there is no simple way of showing the console. Score one for iOS (which allows pretty basic to your console output, but access nevertheless).

Right, so here's what you do to get these logs anyways. I'm going to warn you, you'll never look at your Android device the same after this... This is a windows tutorial. No idea how to do it on mac/nix.

We start by installing the Android SDK. Don't worry, I'll wait. ...

Are we ready? Yeah? No? Oh that's right, packages. Sure, no problem.

Okay, first we go to our "console". Go to Start, Run, type cmd and enter. Yeah, this is your dos prompt. A shortcut would be windows-key + r, cmd, enter.

Now go to the platform-tools dir in the installation directory of Android. On my default win7 machine, that would be C:\Program Files (x86)\Android\android-sdk-windows\platform-tools. If it's not on your machine, check the shortcut on the installed folder in your start menu (properties). So in the console we do cd C:\Program Files (x86)\Android\android-sdk-windows\platform-tools.

Now move to the Android device. I'm on an HTC Desire, slight variations might be possible on other devices. The basic gist is that we need to put the device in the "developer mode". Go to settings, applications, development and check the usb debugging option. Now connect the device to your pc (through usb..).

On your pc, in the console, in that platform-tools dir, is a program called adb.exe. That's what we need. If you execute adb devices, you should see your Android device listed, albeit as a code. Assuming you have nothing else set up, that's your device.

We'll first take a look at the entire log fire hose. Try adb logcat. You'll see quite a bit of log file. When content, you can clear all that with adb logcat -c. Note that you can break out of the log file fire hose with ctrl+c. The fire hose is a "live feed" of anything that gets logged. Here's where you might get a little paranoia because a lot of shit is happening even when the phone is "idle".

So to tone down this fire hose we can apply filters. There are several types of messages going to the log (prefixed with VDIWEFS, explained in link below) and every message has an origin, the app name.

To only see relevant messages from your browser, start the fire hose with adb logcat browser:IEW *:S, this will show only messages from your browser that are Informative, Error or Warning. Any other messages will be Surpressed.

For more information about adb, logcat or the meaning of the message type prefixes see http://developer.android.com/guide/developing/tools/adb.html

As for my trip to debugging why my canvas app wasn't functioning; turns out Android (at least 2.1/2.2) doesn't support canvas.toDataURL(). Thanks for that.

Edit: it seems that at least on Samsung devices, you might have some luck with about:debug. It doesn't work for me on the Desire, but it might work for you :)

Hope it helps ya!