Debugging javascript on Android tablets/phones?

7 Solutions Collect From Internet About “Debugging javascript on Android tablets/phones?”

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.

Android doesn’t (currently) have a WebInspector like Chrome/Chromium does.

You can still look at any console.log() messages fired under window.console in logcat.

Source: http://developer.android.com/guide/webapps/debugging.html

Also, whilst Firefox 4 is available for Android, Firebug currently isn’t supported on the mobile version of the browser.

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

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)

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

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

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