How to Enable the JavaScript Error/Debug Console for Safari Within Android

Is there a way to enable the JavaScript Error/Debug Console for Safari within Android?

A quick Google turns up this blog post (posted after you asked your question), that should at least let you see any Javascript errors via the Android Debug Bridge using the command:

adb logcat WebCore:V *:S

Not quite the same as a full debug console though.

How can I debug javascript on Android?

Update: Remote Debugging

Previously, console logging was the best option for debugging JavaScript on Android. These days with Chrome for Android remote debugging, we are able to make use of all the goodness of the Chrome for Desktop Developer Tools on Android. Check out https://developers.google.com/chrome-developer-tools/docs/remote-debugging for more information.

---

Update: JavaScript Console

You can also navigate to about:debug in the URL bar to activate the debug menu and the JavaScript error console with recent Android devices. You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser.

Currently in Android 4.0.3 (Ice Cream Sandwich), the logcat outputs to the browser channel. So you can filter using adb logcat browser:* *:S.

---

Original Answer

You can use the built in console JavaScript object to print log messages that you can review with adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Produces this output:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

Determining the version of WebKit

If you type javascript:alert(navigator.userAgent) in the location bar you’ll see the WebKit version listed e.g.

In Chrome:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

On Android Emulator
Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

N.B.

Versions of WebKit that are not part of a Safari release have a + after the version number, and their version number is generally higher than the latest released version of WebKit. So, for example, 528+ is an unofficial build of WebKit that is newer than the 525.x version that shipped as part of Safari 3.1.2.

How to view JavaScript console on Android (and iOS)?

For Android you can use remote debugging through chrome as described here

I'll summarize/rewrite the steps (for browser based debugging) here in case the link ever goes down.

Requirements:

• For browser tabs: Android 4.0+ and Chrome for Android
• A USB cable to plug in your Android device
• Chrome 32 or later installed on your development machine

Set up:

• Enable USB debugging on your device.
• Navigate to chrome://inspect/#devices on your desktop Chrome browser. (Alternatively, to get to the same screen, you can select Chrome menu > Tools > Inspect Devices)
• After connecting, you may see an alert on the device requesting permission for USB debugging from your computer. Tap OK
• Chrome should now display the connected device
• Open up chrome on your Android device and navigate to the page you want to debug/inspect. The page should show up on your desktop browser and you should be able to inspect it.

If for some reason you have an older version of chrome and cannot upgrade. There is a plugin that you can install to accomplish the same thing.

How to debug javascript in webview in android

Check out weinre. It provides Chrome developer-like tools for debugging from WebKit browsers to browsers running on remote devices.

Is there a way to enable the JavaScript Error/Debug Console for Safari within Android?

A quick Google turns up this blog post (posted after you asked your question), that should at least let you see any Javascript errors via the Android Debug Bridge using the command:

adb logcat WebCore:V *:S

Not quite the same as a full debug console though.

Is there a kind of Firebug or JavaScript console debug for Android?

One option is weinre. It provides DOM & Style editing along with the console. If you don't want to set it up yourself, there is an instance hosted at http://debug.phonegap.com

The other option is JSHybugger. It's certainly the most complete debugging environment available for android browser. It's a paid product, but probably worth it.

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.

JavaScript Debugging on Android/iPhone

Can't tell anything about the android-part of your question.

Weinre is something that gets usually proposed when it comes to Javascript-Debugging on the iPhone.

Another solution is described here, but it only work with IOS5 in the Simulator. For my own needs I choosed that one because I had the impression that it's easier and quicker to setup.
http://hiediutley.com/2011/11/22/debugging-ios-apps-using-safari-web-inspector/ .

---

Related Topics