1page.title=Debugging Web Apps
2@jd:body
3
4<div id="qv-wrapper">
5<div id="qv">
6<h2>Quickview</h2>
7<ul>
8  <li>You can debug your web app using console methods in JavaScript</li>
9  <li>If debugging in a custom WebView, you need to implement a callback method to handle debug
10messages</li>
11</ul>
12
13<h2>In this document</h2>
14<ol>
15  <li><a href="#Browser">Using Console APIs in the Android Browser</a></li>
16  <li><a href="#WebView">Using Console APIs in WebView</a></li>
17</ol>
18
19<h2>See also</h2>
20<ol>
21  <li><a class="external-link"
22href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging">Remote
23Debugging on Android</a></li>
24  <li><a href="{@docRoot}tools/debugging/index.html">Debugging</a></li>
25</ol>
26
27</div>
28</div>
29
30<p>If you are testing your web app with a device running Android 4.4 or higher,
31you can remotely debug your web pages in {@link android.webkit.WebView} with
32Chrome Developer Tools, while continuing to support older versions of Android.
33For more information, see <a class="external-link"
34href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging">Remote
35Debugging on Android</a>.</p>
36
37<p>If you don't have a device running Android 4.4 or higher, you can debug your JavaScript using the
38{@code console} JavaScript APIs and view the output messages to logcat. If you're familiar with
39debugging web pages with Firebug or Web Inspector, then you're probably familiar
40with using {@code console} (such as {@code console.log()}). Android's WebKit framework supports most
41of the same APIs, so you can receive logs from your web page when debugging in Android's Browser
42or in your own {@link android.webkit.WebView}. This document describes how to use the
43console APIs for debugging.</p>
44
45
46<h2 id="Browser">Using Console APIs in the Android Browser</h2>
47
48<div class="sidebox-wrapper">
49<div class="sidebox">
50  <h2>Logcat</h2>
51  <p>Logcat is a tool that dumps a log of system messages. The messages include a stack trace when
52the device throws an error, as well as log messages written from your application and
53those written using JavaScript {@code console} APIs.</p>
54  <p>To run logcat and view messages, execute
55{@code adb logcat} from your Android SDK {@code tools/} directory, or, from DDMS, select
56<strong>Device > Run logcat</strong>. When using the <a href="{@docRoot}tools/sdk/eclipse-adt.html">ADT
57plugin for Eclipse</a>, you can also view logcat messages by opening the Logcat view, available from
58<strong>Window > Show View > Other > Android > Logcat</strong>.</p>
59  <p>See <a href="{@docRoot}tools/debugging/debugging-log.html">Debugging</a>
60  for more information about <codelogcat</code>.</p>
61</div>
62</div>
63
64<p>When you call a {@code console} function (in the DOM's {@code window.console} object),
65the output appears in logcat. For example, if your web page executes the following
66JavaScript:</p>
67<pre>
68console.log("Hello World");
69</pre>
70<p>Then the logcat message looks something like this:</p>
71<pre class="no-pretty-print">
72Console: Hello World http://www.example.com/hello.html :82
73</pre>
74
75<p>The format of the message might appear different depending on which version of Android you're
76using. On Android 2.1 and higher, console messages from the Android Browser
77are tagged with the name "browser". On Android 1.6 and lower, Android Browser
78messages are tagged with the name "WebCore".</p>
79
80<p>Android's WebKit does not implement all of the console APIs available in other desktop browsers.
81You can, however, use the basic text logging functions:</p>
82<ul>
83  <li>{@code console.log(String)}</li>
84  <li>{@code console.info(String)}</li>
85  <li>{@code console.warn(String)}</li>
86  <li>{@code console.error(String)}</li>
87</ul>
88
89<p>Other console functions don't raise errors, but might not behave the same as what you
90expect from other web browsers.</p>
91
92
93
94<h2 id="WebView">Using Console APIs in WebView</h2>
95
96<p>All the console APIs shown above are also
97supported when debugging in {@link android.webkit.WebView}. 
98If you're targeting Android 2.1 (API level 7) and higher, you must
99provide a {@link android.webkit.WebChromeClient}
100that implements the {@link android.webkit.WebChromeClient#onConsoleMessage(String,int,String)
101onConsoleMessage()} method in order for console messages to appear in logcat.
102Then, apply the {@link android.webkit.WebChromeClient} to your {@link
103android.webkit.WebView} with {@link android.webkit.WebView#setWebChromeClient(WebChromeClient)
104setWebChromeClient()}.
105
106<p>For example, to support API level 7, this is how your code for {@link
107android.webkit.WebChromeClient#onConsoleMessage(String,int,String)} might look:</p>
108
109<pre>
110WebView myWebView = (WebView) findViewById(R.id.webview);
111myWebView.setWebChromeClient(new WebChromeClient() {
112  public void onConsoleMessage(String message, int lineNumber, String sourceID) {
113    Log.d("MyApplication", message + " -- From line "
114                         + lineNumber + " of "
115                         + sourceID);
116  }
117});
118</pre>
119
120<p>However, if your lowest supported version is API level 8 or higher, you should instead
121implement {@link android.webkit.WebChromeClient#onConsoleMessage(ConsoleMessage)}. For example:</p>
122
123<pre>
124WebView myWebView = (WebView) findViewById(R.id.webview);
125myWebView.setWebChromeClient(new WebChromeClient() {
126  public boolean onConsoleMessage(ConsoleMessage cm) {
127    Log.d("MyApplication", cm.{@link android.webkit.ConsoleMessage#message()} + " -- From line "
128                         + cm.{@link android.webkit.ConsoleMessage#lineNumber()} + " of "
129                         + cm.{@link android.webkit.ConsoleMessage#sourceId()} );
130    return true;
131  }
132});
133</pre>
134
135<p>The {@link android.webkit.ConsoleMessage} also includes a {@link
136android.webkit.ConsoleMessage.MessageLevel MessageLevel} object to indicate the type of console
137message being delivered. You can query the message level with {@link
138android.webkit.ConsoleMessage#messageLevel()} to determine the severity of the message, then
139use the appropriate {@link android.util.Log} method or take other appropriate actions.</p>
140
141<p>Whether you're using {@link
142android.webkit.WebChromeClient#onConsoleMessage(String,int,String)} or {@link
143android.webkit.WebChromeClient#onConsoleMessage(ConsoleMessage)}, when you execute a console method
144in your web page, Android calls the appropriate {@link
145android.webkit.WebChromeClient#onConsoleMessage(String,int,String)
146onConsoleMessage()} method so you can report the error. For example, with the example code above,
147a logcat message is printed that looks like this:</p>
148
149<pre class="no-pretty-print">
150Hello World -- From line 82 of http://www.example.com/hello.html
151</pre>
152
153
154
155
156
157
158