Question

What tool will allow me to view javascript exceptions in Android native browser pages on 4.2.2?

I don't use Android day to day, but I am a software developer, and I do know that this browser (and Android 4.1 iirc) are causing some rare javascript glitches on our application.

I would normally troubleshoot this with something like the Chrome inspector console, but that's not available on the Android 4.2.2 platform is it? I haven't seen something like this for troubleshooting.

Basically I need access to the console debug output and networking results, but interactive console would be lovely as well.

The app primarily uses ExtJS and internally developed javascript, and an ASP.NET web tier.

Answer 1

Chrome on Android make this very, very easy. In fact you no longer need the SDK installed or a Chrome add-in on the desktop. However you're asking about the Android Browser. While not present on Nexus devices, this browser lives on in some form on many phones (HTC, Samsung).

To debug Javascript on the Android Browser I use one of three applications:
If I just want console output:

Android Studio - The full-blown IDE for native Android development. Next open any android project (just make an empty project). Then I attach a phone via USB and open the Android docking windows (windows:alt-6 or Mac:cmd-6). In that window click on the Devices/LOGCAT tab. Everything that logs on android will be shown here, including console.log(), but also like hundreds of other things too. You'll have to filter the results so you only see your browser's output. My test device hooked up now (Note 3) included "chromium" in the log, which I can filter on. ("Chromium", huh, that's strange. I know Chrome reports that in LOGCAT, didn't think the native browser would)

Note: Anything that can view LOGCAT would work. This includes ADB or Eclipse with all the Android stuff installed.

Edit: you may need to install USB drivers for Studio/Eclipse/ADB and enable debugging on the device for this to work.
Something more the console output:

jsHybugger - This is a commercial product. It's an app you run on the phone. Your phone browser connects to the proxy locally and then the proxy connects to your web server. Then you can open a desktop browser to the an endpoint on the phone and magically you'll get something similar to the web debugging tools. It includes source-level debugging.

Full disclosure: I have not used the paid version of the application. I have an old version installed back when this was in beta and was on the Play Store for free. I'd gladly pay for this but it's rare that I need this level of debugging on the Android Browser. It's more aimed at hybrid (webview/phonegap) applications I think.

There's also WEINRE. A free tool that works similarly to jsHybugger. I haven't used this in some time, so please someone edit this for more detail.

First you'll need to decide if you want to run wienre on your own PC or use a hosted server. If you use a hosted server like phonegap's you just add a script tag pointing to a src-url. Next you just open your desktop browser to a page that corresponds to the script name you used (just read the instructions on the phonegap page).

If you want to run the server-side locally, read the install instructions on the weinre page. (the server is a node.js app - it wasn't too hard to install)