309

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?

Jerod Venema
  • 44,124
  • 5
  • 66
  • 109
  • 2
    Off topic, but consider checking out Snap.svg. It is the remake of RaphaelJS from the same person. It is recreated without the support of old browsers, so it is faster, the code is cleaner, etc. – Lajos Mészáros May 21 '15 at 12:06
  • Note for accepted answer: In the Samsung Experience >= 9, if you hasn't found your device, switch USB type to sound connector. – BOZ Apr 21 '19 at 00:01
  • Partial duplicate: [Is it possible to open developer tools console in Chrome on Android phone? - Stack Overflow](https://stackoverflow.com/questions/37256331/is-it-possible-to-open-developer-tools-console-in-chrome-on-android-phone) – user202729 Aug 03 '20 at 10:33

22 Answers22

259

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.

Pierre-Antoine LaFayette
  • 24,222
  • 8
  • 54
  • 58
  • 18
    when oh when will i be able to debug locally on Android for times when I can't do it remotely? – Michael Dec 17 '13 at 20:19
  • Not sure. It wouldn't make much sense on a small device like a phone because the screen real estate would be so limited for a full Web Inspector. On tablets it might make more sense, but they'd have to reimagine the Web Inspector for a touch interface which is a significant effort. Maybe they are working on it but who knows. – Pierre-Antoine LaFayette Dec 19 '13 at 19:09
  • 1
    I suspect a first cut without any significant adaptations would be a good start, i.e. allow a significant amount of functionality to be used. Some tablets even have a stylus so mouse events can work the same. – Michael Dec 19 '13 at 23:02
  • What was that about a small device like a phone!?!?!? http://www.bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/4595118.p?skuId=4595118 – Michael Dillon Oct 03 '16 at 20:50
  • Note from the Chrome for Android remote debugging link: "You should be signed in to Chrome with one of your Google accounts. Remote debugging does not work in Incognito Mode or Guest Mode." Wow, why? – sdbbs Dec 19 '16 at 09:56
  • In the Samsung Experience >= 9, if you hasn't found device, switch USB type to sound connector. – BOZ Apr 20 '19 at 23:59
  • This is old and does not seem to be entirely correct anymore. On Android 10 with Chrome 76 o a Pixel 3XL, there is no debug console that I can find. – cdonner Aug 13 '19 at 15:05
  • If your issue is that you've tried all the instructions, and still can't see your Android device in Chrome's remote devices list, it may be because apparently you have to have adb (or full Android Studio) installed. This worked for me, see https://android.stackexchange.com/a/127276/307307 –  Oct 03 '19 at 15:32
  • Please mention https://stackoverflow.com/a/33927560/2404492, it was useful for me. No need for remote debugging, and `about:debug` trick didn't work for me on the latest Android Chrome at the time of writing. – Alexandr Zarubkin Dec 19 '19 at 16:07
139

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;
}
Community
  • 1
  • 1
Mads Mobæk
  • 34,762
  • 20
  • 71
  • 78
  • That linked question finally helped me figure out how to actually display the JS console once it's enabled. – Alex Korban Feb 26 '12 at 23:38
  • 23
    I have just tried, but the about:debug trick did not work on my Nexus S with ICS 4.0.3. – derflocki May 21 '12 at 06:39
  • 6
    You should try to navigate to `about:debug` from within the same tab that you have your current page open. Instead of navigating, it will display "SHOW JAVASCRIPT CONSOLE" at the top. If you try accessing `about:debug` from a new tab, it won't work. – Denilson Sá Maia Oct 08 '13 at 05:03
  • 11
    This is the stock browser only, right? I'm trying it in a Chrome for Android beta on KitKat without any luck. (seems KitKat no longer has the stock browser) – James Mar 07 '14 at 03:50
  • 7
    This needs an Android stock browser, and it does not work on Chrome :) – giorgio79 Mar 07 '14 at 12:06
  • 6
    Kitkat stock browser, if your manufacturer uses it, is Chromium. `about:debug` really forwards to `chrome://debug` which says "cannot be found" but shows a `Debug` option in the settings. Some of the options do not go into affect until a new tab is opened afterwards. – cde Dec 14 '14 at 05:06
55

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

tonio
  • 2,376
  • 1
  • 22
  • 28
tortexy
  • 673
  • 5
  • 4
22

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 (?).)

KajMagnus
  • 11,308
  • 15
  • 79
  • 127
  • Added a step-by-step guide to weinr on OS X at http://stackoverflow.com/questions/13330221/how-can-i-inspect-element-in-a-android-browser – leymannx Jul 23 '14 at 20:49
  • I've already tried Weinre and I was not very satisfied with the tool. The log is not really reliable. Some errors are not shown. Even if they're shown, Weinre only displays the error message, without the stack trace. That completely pissed me off. – Lewis Aug 28 '17 at 11:07
  • I've already tried Weinre and I was not very satisfied with the tool. The log is not really reliable. Some errors are not shown. Even if they're shown, Weinre only displays the error message, without the stack trace. That completely pissed me off. – Lewis Aug 28 '17 at 11:07
18

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.

cyberflohr
  • 789
  • 5
  • 10
  • Why was this downvoted? It's one of the only tools that supports remote debugging of webViews inside of native apps. – Alfie Hanssen Jul 18 '13 at 21:20
  • Because it doesn't say how to do it, except it points you to a whole-project link, so you have to dig it yourself a lot before actually succeeding – DATEx2 Aug 13 '13 at 06:15
  • 2
    This tool is actually pretty good and solved my problem. Too bad I had to dig around googling for it instead of seeing this answer since *someone* decided to bury it. (I ended up here first) I'll add some details to improve the this answer, see how this whole SO thing works? – Aardvark Sep 04 '13 at 20:33
  • jsHybugger APK is no longer available on Google Play nor for download. The project is stored here: https://github.com/dcendents/jsHybugger; but seems not to include the code to generate the APK. – Adrian Herscu Dec 17 '18 at 15:03
13

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.

Charlie
  • 8,530
  • 2
  • 55
  • 53
13

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.

Ludvig Svenonius
  • 139
  • 1
  • 2
9

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)

BurninLeo
  • 4,240
  • 4
  • 39
  • 56
7

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

honzajde
  • 2,270
  • 3
  • 31
  • 36
6

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.

user3905
  • 61
  • 1
  • 2
5

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)
cde
  • 317
  • 1
  • 18
user3663132
  • 53
  • 1
  • 5
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>
yorg
  • 600
  • 5
  • 7
4

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.

Gregory R.
  • 1,815
  • 1
  • 20
  • 32
  • I don't know why this answer hasn't gotten more recognition. It was incredibly simple and it works for emulator and physical device – Frank Mar 13 '19 at 21:28
1

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 imageenter image description here
Antonio Petricca
  • 8,891
  • 5
  • 36
  • 74
1

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.

IntegratedHen
  • 399
  • 4
  • 4
1

"Kiwi browser" has the same tools as the desktop chrome browser and can debug locally in android - no usb needed. Load the html file and choose "developer tools" in the menu. If you need to restart the debugging, reload the html.

myribbit
  • 11
  • 1
0

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

Reign.85
  • 2,420
  • 1
  • 28
  • 28
0

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.

Christian Læirbag
  • 230
  • 4
  • 16
0

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

Devashish Priyadarshi
  • 105
  • 7
0

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)

allofmex
  • 557
  • 1
  • 4
  • 16
0

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

fullpipe
  • 368
  • 4
  • 14
0

try "vconsole", maybe help you

Stephen Vicky
  • 21
  • 2