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

Raphael is not supported on pre 3.0 Android browsers, that's what your problem is. They have no support for SVG graphics. It does have support for canvas though. If you don't need to animate it, you could render the graphics with canvg:

http://code.google.com/p/canvg/

That's how we got around this issue for rendering SVG icons in the default Android browser.

Answer 2

Put into address line chrome://about. You will see links to all possible dev pages.

Answer 3

Try:

1. open the page that you want to debug

2. while on that page, in the address bar of a stock Android browser, type:

   about:debug 
   

   (Note nothing happens, but some new options have been enabled.)

Works on the devices I have tried. Read more on Android browser's about:debug, what do those settings do?

Edit: What also helps to retrieve more information like line number is to add this code to your script:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

Answer 4

You can try YConsole a js embedded console. It is lightweight and simple to use.

• Catch logs and errors.
• Object editor.

How to use :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>