console.log browser in android emulator

Question

How to see console.log messages of a website using android emulator?

Answer 1

From Rich Chetwynd's short article "Javascript debugging on Android browser".

You can log javascript errors and console messages from your Android device or emulator. To do this you first need to install the Android SDK and USB drivers and enable USB debugging on the actual device.

To check if the device is connected correctly you can run the following cmd from your Android SDK tools directory and you should see a device in the list

c:\android sdk..\platform-tools\adb devices

You can then use the Android Debug Bridge to filter debug messages so that you only see browser related messages by running the following cmd.

c:\android sdk..\platform-tools\adb logcat browser:V *:S

By default the log is written to stdout so you will see any Javascript errors or console.log messages etc written to the cmd window.

Further details: Logcat CLI tool docs.

Answer 2

If you have started the emulator from Eclipse with the ADT plugin, you will see all JavaScript console logs directly under the LogCat view :

Window -> Show View -> Android -> LogCat

Answer 3

You could add some JavaScript temporarily like...

var console = {
    log: function(msg) { alert(msg); }
};

Ugly as hell, but it works.

Answer 4

I hijacked the console.log using this code:

function logManager() {
    var self = this;

    self.init = function () {
        console.log('logmanager initialized');
        var old = console.log;
        self.logger = document.getElementById('log');
        console.log = function (message, options) {
            if (typeof message == 'object') {
                self.logger.innerHTML = (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />' + self.logger.innerHTML;
            } else {
                self.logger.innerHTML = message + '<br />' + self.logger.innerHTML;
            }
        }
    }
    self.toggleLogVisibility = function () {
        return $(self.logger).toggle();
    };
}

And consume it like so in your html with your own styling (absolute top right is what I used)

<div id="log" class="log">
    Application loaded...
</div>

And in your jscript (run this on page loaded as the log element has to exist)

document.lmgr = new logManager();
document.lmgr.init();

Answer 5

If you are using Android Studio; you can open your Logcat (Alt+6) and filter for: :CONSOLE

Filtering for only :CONSOLE (rather than INFO:CONSOLE) will display all types of console messages (including ERROR, WARN, etc).