How can I debug javascript on Android?

Question

I'm working on a project that involves Raphaeljs. Turns out, it doesn't work on Android. It does on the iPhone.

How the heck to I go about debugging something on the Android browser? It's WebKit, so if I know the version, will debugging it on that full version of WebKit produce the same results?

Answer 1

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.

Answer 2

My solution is (for the stock browser):

• Stock Browser
• "consolo.log" into the JS source code
• Debug USB enabled
• Android SDK
• From Android SDK : monitor.bat
• Monitor filter as the attached image

Answer 3

Take a look at jsHybugger. It will allow you to remotely debug your js code for:

• Android hybrid apps (webview, phonegap, worklight)
• Web pages which runs in the default android browser (not Chrome, it supports the ADB extension without this tool)

How this works (more details and alternatives on the projects site, this was what I found to be the best way).

1. Install the jsHybugger APK on your device
2. Enable USB debugging on you device.
3. Plug the Android device into your desktop computer via USB
4. Run the app on the Android device ('jsHybugger')
5. Enter the target URL and page in the app. Press Start Service and finally Open Browser
   • You'll be presented with a list of installed browsers, choose one.
   • The browser launches.
6. Back on your desktop computer open Chrome to chrome://inspect/
7. An inspectors window will appear with the chrome debugging tools linked to the page on the Android device.
8. debug away!

Again, with Chrome on Android use the ADB extension without jsHybugger. I think this already described in the accepted answer to this question.

Answer 4

Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5.1.1:

1. Enable USB Debugging on phone (Settings, about, rapidly tap build number, developer settings, USB debugging)
2. Open "Internet"
3. Navigate to 'about:debug' (you will see an error)
4. MORE menu > Settings > Debug > Remote Debugging
5. Attach phone to computer with USB cable
6. On the phone, in the Internet web browser, open the site you want to debug
7. Open Chrome on computer
8. Navigate to 'chrome://inspect'
9. Click inspect on the browser tab you want to inspect

The Galaxy S5 devices shows in Chrome but the tabs only show after you restart. After restarting and attempting to attach, the mobile browser crashes.

Answer 5

The http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) provides a nice way you can use to access the content of you webpage.

Answer 6

The about:debug (or chrome:\\debug both of which say page cannot be found, but enable the Debug menu in the settings) when tried on Chrome or Opera on Android KitKat 4.4.2 on a Samsung Tab

If you have ROOT permissions on your device, you can view the console messages directly on the device. Use an app like CatLog to view the log output - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en This will let you view all logcat activity.

In Android KitKat/4.4.2, the browser console is output to the Chromium channel. You could filter by "Chromium" to get all browser activity (include browser's internal activity), or simply filter by "Console" to only see the Browser console log.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)