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?
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.
You can try YConsole a js embedded console. It is lightweight and simple to use.
How to use :
<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>
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.
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.
Try:
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;
}
Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5.1.1:
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.
Take a look at jsHybugger. It will allow you to remotely debug your js code for:
How this works (more details and alternatives on the projects site, this was what I found to be the best way).
Again, with Chrome on Android use the ADB extension without jsHybugger. I think this already described in the accepted answer to this question.
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 (?).)
Put into address line chrome://about
. You will see links to all possible dev pages.
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/"
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.
Chrome has a wonderful feature that simply takes the actual Android Chrome contents (incl. inspection etc.) onto the PC screen...
adb devices
to trigger the "allow communication with..." dialogue on the mobile device,chrome://inspect/#devices
on the PC.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)
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)
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)
My solution is (for the stock browser):
The http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) provides a nice way you can use to access the content of you webpage.
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.
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
You could try https://github.com/fullpipe/screen-log. Tried to make it clean and simple.
Source: Stackoverflow.com