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