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.

FYI, the reason why RaphaelJS doesn't work on android is that android webkit (unlike iPhone webkit) doesn't support SVG at this time. Google has only recently come to the conclusion that SVG support an android is a good idea, so it won't be available yet for some time.

Chrome has a wonderful feature that simply takes the actual Android Chrome contents (incl. inspection etc.) onto the PC screen...

• Enable USB debugging on the device, maybe you also need to connect once via adb devices to trigger the "allow communication with..." dialogue on the mobile device,
• connect the Android device to the PC,
• start Chrome on both, and
• then navigate to chrome://inspect/#devices on the PC.
• Here, the tabs from the mobile phone Chrome are listed and can be inspected.

There's also a detailled manual on the net: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(found that after adb logcat showed nothing from the browser)

When running the Android emulator, open your Google Chrome browser, and in the 'address field', enter:

chrome://inspect/#devices

You'll see a list of your remote targets. Find your target, and click on the 'inspect' link.

No one mentioned liriliri/eruda which adds its own debugging tools meant for mobile websites/apps

Adding this to your page:

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

Will add a floating icon to your page which opens the console.

You can try "javascript-compiler-deva" from npm library by running "npm install javascript-compiler-deva" command and then running the compiler.is using "node compiler.js".

It creates a server at port 8888. You can then hit "http://localhost:8888" and enter your JavaScript code and can see the result of any JavaScript code including "console.log" in phone browser itself.

It is also hosted in "https://javascript-compiler-deva.herokuapp.com/"

The local debugging/about:config... options seem not to work in 2020+ chrome/ff/.. browsers anymore.

Another browser with non-remote js console is DevBrowser

or WebInspector (file picker not working)

You could try https://github.com/fullpipe/screen-log. Tried to make it clean and simple.