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

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.

Answer 2

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.

Answer 3

Android studio provide all you need to see console.log and other. In logcat just filter to "/Web Console" and you will see your js logs...

If you get any issue you can add this plugin : https://github.com/apache/cordova-plugin-console

Answer 4

If you are looking for non remote options:

On earlier and non rooted Jellybean releases a logcat viewer can be used if android.permission.READL_LOGS is granted via adb once.

On firefox, there is a console addon that reads and shows all app logs and there is also firebug lite.

Answer 5

I use Weinre, part of Apache Cordova.

With Weinre, I get Google Chrome's debug console in my desktop browser, and can connect Android to that debug console, and debug HTML and CSS. I can execute Javascript commands in the console, and they affect the Web page in the Android browser. Log messages from Android appear in the desktop debug console.

However I think it's not possible to view or step through the actual Javascript code. So I combine Weinre with log messages.

(I don't know much about JConsole but it seems to me that HTML and CSS inspection isn't possible with JConsole, only Javascript commands and logging (?).)

Answer 6

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/"