CODEWITHSUNDEEP
javascriptandroidiosdebuggingconsole
Geuis
Geuis

Reputation: 42277

Debugging javascript on Android tablets/phones?

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 how to enable the dev tools in the Android browser like I do for iOS but can't seem to locate it.

Upvotes: 14

Views: 22662

Answers (7)

Ganesh Krishnan
Ganesh Krishnan

Reputation: 7395

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

Upvotes: 1

NoBugs
NoBugs

Reputation: 9496

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

Upvotes: 1

Mauvis Ledford
Mauvis Ledford

Reputation: 42354

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.

Upvotes: 13

jobwat
jobwat

Reputation: 9223

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

Upvotes: 5

trkaplan
trkaplan

Reputation: 3487

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

Upvotes: 1

Amandasaurus
Amandasaurus

Reputation: 60709

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)

Upvotes: 2

KushalP
KushalP

Reputation: 11206

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.

Upvotes: 5

Related Questions