如何通过日志来调试Web App

我们可以通过JavaScript的控制台API输出信息到Android的logcat上来跟踪WebView加载网页时发生的异常或错误的原因，以此来对Web App进行调试。
在Android浏览器中使用控制台API
如果我们在网页的JavaScript脚本代码中调用了window.console对象的方法比如log()方法向控制台输出日志信息，我们就会在Android的logcat中看到该日志信息。比如，下面的代码：
console.log("Hello World");
在logcat中就会显示下面的信息：

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

上述信息的格式在不同的Android系统中可能会有差别。在Android 2.1及以上版本中，Android浏览器的控制台信息的输出标签为“browser”，而在Android 1.6及以下版本中，标签则为“WebCore”。Android的WebKit引擎主要支持以下JavaScript控制台API：
console.log(String)
console.info(String)
console.warn(String)
console.error(String)

在WebView中使用控制台API
上面列出的控制台API也适用于WebView。在Android 2.1（API level 7）及以上版本中，我们需要提供一个WebChromeClient类的对象并覆写它的onConsoleMessage()方法才能使控制台的输出信息出现在logcat中。然后通过WebView的setWebChromeClient()方法把该对象传递给WebView。下面为一个API level 7中的示例：
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
public void onConsoleMessage(String message, int lineNumber, String sourceID) {
Log.d("MyApplication", message + " -- From line "
+ lineNumber + " of "
+ sourceID);
}
});

在API level 8及以上版本中，需要这样来写：
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
public boolean onConsoleMessage(ConsoleMessage cm) {
Log.d("MyApplication", cm.message() + " -- From line "
+ cm.lineNumber() + " of "
+ cm.sourceId() );
return true;
}
});

上面例子中的ConsoleMessage对象还包括了一个MessageLevel对象，可以获取到控制台输出的类型信息，这是通过调用MessageLevel对象的messageLevel()方法来获取到的，然后在Android代码中使用相应的Log类的方法或做其他的处理。当我们在网页中使用JavaScript脚本向控制台输出信息时，根据不同的版本Android系统会调用onConsoleMessage(String, int, String)或onConsoleMessage(ConsoleMessage)方法使页面的错误信息出现在logcat中。比如，对于下面的代码：
console.log("Hello World");
在logcat中的输出可能为：
Hello World -- From line 82 of http://www.example.com/hello.html

更多相关文章

随机推荐