How to Debug JavaScript on Android

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.

Android studio - Debug Javascript

Open chrome and go to DevTools ( Inspect Element),
click the Main Menu then select More tools > Remote devices.
open the Settings tab.
Make sure that the Discover USB devices checkbox is enabled.
Connect your Android device directly to your development machine
using a USB cable. The first time you do this, you usually see that
DevTools has detected an unknown device. If you see a green dot and
the text Connected below the model name of your Android device, then
DevTools has successfully established the connection to your device
In the Remote Devices tab, click the tab that matches your Android
device model name and Click "Inspect"

check this link for debugging JavaScript on Android in details

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

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.

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.

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.