Javascript console.log() on HTC Android devices and adb logcat

Question

I am developing the application in HTML which is calling the console.log() from Javascript to provide me logs during the development about what happens in the web page code.

Unfortunately when I use the adb logcat command to check logs I can see output from all other applications, but not the output from my JavaScript code. I can see even the log from web browser that the page is loaded, but not console.log() output from my JavaScript code executed in the web browser.

According to information on this page (http://developer.android.com/guide/webapps/debugging.html) it should work.

I am testing on HTC WildFire and HTC Desire HD.

---

Edited after more then 6 months

After some time and experience with different devices (phones, TVs, set top boxes, WebViews, UIWebViews...) my advice is to do the remote logging from JavaScript and not relying on the console.log() or other methods - see the nice trick with the image loading here.

Do not miss the presentation here Hope this helps! STeN

Illogical

please provide your code. Did you try the one on the page you posted above? – Piglet

Hi, I call from JavaScript only console.log() method on many places, e.g console.log( "[Go to details]");, nothing more. Btw. I am using the Sencha Touch framework, but should not affect anything... – Illogical

I'm using an HTC Droid Incredible and can't get console.log to work correctly, either. When I use the emulator console.log works properly and routes everything to the logcat, but not when i try directly on my device. – Debit

I have a similar problem with the HTC Evo - console.log (as well as console.error, console.warn and console.info) don't show in logcat. The same program shows fine on the emulator, Nexus One, and Motorola Droid – Strow

similar discussion about HTC and Android 2.2 at #4860521 – Strow

You've implemented developer.android.com/reference/android/webkit/…? – Incurrent

Answer 1

In the default browser on Android 2.3.3 (and presumably from then on) you can simply use the built in javascript console:

• open the browser
• go to your webpage
• type about:debug in the address bar and hit enter
• you'll see a section for debug options appear if you go into the browser app's settings
• tick "Show JavaScript Console" if not already enabled
• refresh your webpage

At the top, you'll see a bar labeled "JavaScript Console".

Opossum

This is very cool. Unfortunately, it does not appear to be on ANY of the Android devices I have: Motorola Xoom WiFi running Android 3.2 Samsung Galaxy S(SGH-I897) running Android 2.2 Samsung Galaxy S(SGH-I897) running Android 2.1 Samsung Galaxy Tab (The first one) running Android 2.1 Javascript is enabled. I can't seem to find any "official" documentation on this. Do you know where I could find some? I am wondering why I am missing out! Thanks. – Ploss

Thank you thruflo! This worked for me on a Nexus S running Android 2.3.6. I like this solution because I can keep using the simple console.log() method (I like simple ;-), and don't need to add a JS logging framework. NOTE: After typing in about:debug, it took me a minute to realize that the Javascript Console was available. It shows up as a thin bar at the top of the window. Touching it expands it. – Absurd

+1 I never knew about about:debug – Oman

Answer 2

I have been using three different HTC phones, almost exclusively, and have never had this issue. Here are a few things to check:

1. Make sure USB debugging is enabled.
2. Make sure your Webview has a WebChromeClient set. The browser used in Webview does not implement console.log().
3. It should be easy to see the output of adb logcat, but to make it easier, filter the output.

Turn on USB debugging:

1. Disconnect your device from your computer.
2. Go to Settings -> Applications -> Development -> Select "Enable USB Debugging"
3. Plugin to computer. (Make sure you have the correct drivers installed to use ADB - more info here: http://developer.android.com/guide/developing/device.html)

Set a WebChromeClient that overrides onConsoleMessage():

//Set the output prefix so you can filter adb logcat results later
public static final String TAG = "Your-Application-Name";

myWebView = (WebView) findViewById(R.id.webview);

//Not going to have much luck running JS without this:
myWebView.getSettings().setJavaScriptEnabled(true);

//Override onConsoleMessage() to output to the Log.
myWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d(TAG, cm.message() + " -- From line "
        + cm.lineNumber() + " of "
        + cm.sourceId() );
        return true;
    }
});

More info on onConsoleMessage() here: http://developer.android.com/reference/android/webkit/WebChromeClient.html#onConsoleMessage(java.lang.String, int, java.lang.String)

More info on debugging in general here: http://developer.android.com/guide/webapps/debugging.html

Filter the output of adb logcat:

adb logcat tag-name:log-level *:S

tag-name matches the string specified in Log.x log-level matches the log level you indicated when calling Log.x <---

Example relating to code above:

adb logcat Your-Application-Name:D *:S

This will show all d level logs for the matching tag, Your-Application-Name, and silence everything else.

More info on adb filtering here: http://developer.android.com/guide/developing/tools/adb.html#logcat

Hope it helps! I know it was a bit of summarizing of the other answers, but, the fact is, it takes all of the steps to make it work. :)

Ploss

I have a HTC Desire 2.3.3 eating the console.log output. using onConsoleMessage even cannot get the log from js. – Winnah

Answer 3

I had the same problem, I solve it by doing the following:

1/ when you initialize your webview, add a javascript bridge class:

appView.addJavascriptInterface(new JSBridge(), "JSBridge");

2/ create the class JSBridge with a log function

class JSBridge {
  public void log(String msg){
   Log.d(msg);
  }
}

3/ in your javascript you can now call

JSBridge.log("my log message");

Might be a bit overkill for your problem, but you can also do a LOT more with that solution

Armor

where to initialize your webview, add a javascript bridge class ? – Gingergingerbread

Answer 4

Logcat generates a lot of stuff on devices in addition to yours so you may have to filter this.

You can try to "grep" your log output if you've tagged it. For example: acording to your article the output should look like:

Console: Hello World http://www.example.com/hello.html :82

If you use the command (assuming you are using a Linux, Mac OS or anything else with a grep command)

adb logcat | grep -i "console"

it will reduce the output to the keyword specified within these quotation marks. If you add a unique tag to your output you can also filter this so you get only things you want to see.

[ctrl]+c

will stop this logcat process.

Crosshead

Answer 5

See this: How to display console.log() output in PhoneGap app using Eclipse and HTC Desire HD?

It seems that console.log is disabled on HTC devices running Android 2.2.

You can get around it by using remote debugging in jsconsole.com.

Eurhythmics

+1 for jsconsole.com which I just got working far more easily than the words "remote debugging" would make you believe – Inland

Answer 6

Try the following:

1) Open the devices tab and make sure that the device you have connected is selected/highlighted.

2) Make sure USB Debugging is enabled on your device. Here is what you need to do for this:

2a) From the Home screen, press MENU, and then tap Settings > Applications > Development.

2b) Make sure the USB debugging check box is selected.

Jacobinism

Also clear the log before runnin your app. Sometimes the logCat buffer gets full and it immediately clears any logs the instant they appear. (They appear like a flash) – Jacobinism