Debugging javascript on Android tablets/phones?

Question

How do I enable the debug view like I can in Safari on iOS? I simply need to see if a Xoom that I\'m testing a page on is generating javascript errors. I was trying to find

Answer 1

Try Weinre: Web Inspector Remote / Watch demo

"Weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone. "

You may have a look some other remote debugging tools: jsconsole or Aardwolf

Answer 2

I've worked on an Android app in the past where the java developer set it to alert JavaScript errors - caught an extra bug that we didn't catch in the iOS version because of it. So, if you have access to the java layer, I'd check that out. I asked him what he did specifically and he said: "There's a callback from the WebView class that lets me know when the JS code throws an error. I implemented that callback to display an android dialog."

There's two solutions other ideas on top of this that I use for debugging (ios/android). These are especially useful for embedded web views in games where you don't have access to the built-in console:

1) Weinre a still beta, but functional, remote debugger. It'll give you a faux inspector on your desktop that you can query / see errors on your remote device with. Has a whole dom inspector and anything. The guy that develops it is pretty responsive, too.

2) I write a javascript log function that hits my servers error log. Just tail your log file and you're good to go. My javascript function looks something like this:

function hlog(){
    var s = Array.prototype.slice.apply(arguments).join('¶');
    document.createElement('img').src = 'http://yourdevbox/debugger/?m=' + encodeURIComponent(s);
}

That way I can take any number of arguments. My php page that recieves this request looks like this:

# ensure this can't be used in production 
if (strpos($GLOBALS['HTTP_HOST'], 'devboxhostname') < 0) die(':(');
error_log($_GET['m']);

Hopefully in the future, mobile devs will have way better debugging tools.

Answer 3

You don't have to install any software or try to debug in your tiny mobile screen. First enable USB debugging in your device in the "Developer settings" and then use your desktop chrome to connect and debug the mobile browser.

I found the easiest way is to enabled USB debugging on the phone/tablet and in your desktop navigate chrome to

chrome://inspect/#devices

Enable discover usb devices and then on the list of apps click "Inspect"

Voila! Remote debugging! Now you can debug your phone from the comfort of your desktop

Answer 4

type about:debug into the url field and validate, a javascript console will then be available (same method to remove it)

a bit more on this page: https://android.stackexchange.com/questions/5999/android-browsers-aboutdebug-what-do-those-settings-do

Answer 5

The best you can do is use console.log() (like firebug), and then install a log viewer on your phone, filter based on browser, and you can see all the console messages. (source)

Answer 6

Opera mobile has remote debugging: http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/

The Android default doesn't seem to have a debugger, although you can debug on chrome/chromium on a pc, which uses the same webkit rendering. (There's even a emulate Android option, but it doesn't have all the quirks of Android tablets, image/memory constraints etc.)

Firebug Lite is also a possibility: http://getfirebug.com/firebuglite