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

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

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. :)

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

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.

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.

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.