1 page.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 10 messages</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" 22 href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging">Remote 23 Debugging 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, 31 you can remotely debug your web pages in {@link android.webkit.WebView} with 32 Chrome Developer Tools, while continuing to support older versions of Android. 33 For more information, see <a class="external-link" 34 href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging">Remote 35 Debugging 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 39 debugging web pages with Firebug or Web Inspector, then you're probably familiar 40 with using {@code console} (such as {@code console.log()}). Android's WebKit framework supports most 41 of the same APIs, so you can receive logs from your web page when debugging in Android's Browser 42 or in your own {@link android.webkit.WebView}. This document describes how to use the 43 console 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 52 the device throws an error, as well as log messages written from your application and 53 those 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 57 plugin 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), 65 the output appears in logcat. For example, if your web page executes the following 66 JavaScript:</p> 67 <pre> 68 console.log("Hello World"); 69 </pre> 70 <p>Then the logcat message looks something like this:</p> 71 <pre class="no-pretty-print"> 72 Console: 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 76 using. On Android 2.1 and higher, console messages from the Android Browser 77 are tagged with the name "browser". On Android 1.6 and lower, Android Browser 78 messages 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. 81 You 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 90 expect 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 97 supported when debugging in {@link android.webkit.WebView}. 98 If you're targeting Android 2.1 (API level 7) and higher, you must 99 provide a {@link android.webkit.WebChromeClient} 100 that implements the {@link android.webkit.WebChromeClient#onConsoleMessage(String,int,String) 101 onConsoleMessage()} method in order for console messages to appear in logcat. 102 Then, apply the {@link android.webkit.WebChromeClient} to your {@link 103 android.webkit.WebView} with {@link android.webkit.WebView#setWebChromeClient(WebChromeClient) 104 setWebChromeClient()}. 105 106 <p>For example, to support API level 7, this is how your code for {@link 107 android.webkit.WebChromeClient#onConsoleMessage(String,int,String)} might look:</p> 108 109 <pre> 110 WebView myWebView = (WebView) findViewById(R.id.webview); 111 myWebView.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 121 implement {@link android.webkit.WebChromeClient#onConsoleMessage(ConsoleMessage)}. For example:</p> 122 123 <pre> 124 WebView myWebView = (WebView) findViewById(R.id.webview); 125 myWebView.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 136 android.webkit.ConsoleMessage.MessageLevel MessageLevel} object to indicate the type of console 137 message being delivered. You can query the message level with {@link 138 android.webkit.ConsoleMessage#messageLevel()} to determine the severity of the message, then 139 use the appropriate {@link android.util.Log} method or take other appropriate actions.</p> 140 141 <p>Whether you're using {@link 142 android.webkit.WebChromeClient#onConsoleMessage(String,int,String)} or {@link 143 android.webkit.WebChromeClient#onConsoleMessage(ConsoleMessage)}, when you execute a console method 144 in your web page, Android calls the appropriate {@link 145 android.webkit.WebChromeClient#onConsoleMessage(String,int,String) 146 onConsoleMessage()} method so you can report the error. For example, with the example code above, 147 a logcat message is printed that looks like this:</p> 148 149 <pre class="no-pretty-print"> 150 Hello World -- From line 82 of http://www.example.com/hello.html 151 </pre> 152 153 154 155 156 157 158
