专题 - Web应用->调试Web应用

本篇文章翻译自Debugging Web Apps

当继续支持老版本的Android系统时，如果你在一个Android 4.4或更高版本的设备上测试你的web应用，你可以使用Chrome开发者工具来远程调试在

WebView

中的web页面。更多信息，可查看Remote Debugging on Android。

如果你没有运行Android 4.4或更高版本的设备，你可以使用JavaScript的API

console

来调试你的JavaScript并且在logcat中查看输出的信息。如果你熟悉使用Firebug或者Web Inspector来调试web页面，那么你也可能熟悉

console

的使用（比如

console.log()

）。Android的WebKit框架支持大部分相同的API，所以当在Android的浏览器或你自己的

WebView

中调试时，你可以接收到web页面中的log。这篇文章描述了如何使用控制台的API进行调试。

在Android浏览器中使用控制台的API

当你调用一个

console

的方法时（在DOM的

window.console

对象里），输出会出现在logcat里。比如，你的web页面执行了下面的JavaScript：

console.log("Hello World");

那么，logcat的消息大概是下面的样子：

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

依赖于你所使用的Android版本，消息的格式可能会不同。在Android 2.1或更高版本，来自Android浏览器的控制台消息被标记为”browser”。而在Android 1.6或更低版本，Android浏览器的消息被标记为”WebCore”。

Android的WebKit没有实现在其它桌面浏览器里可用的所有的控制台API。不过，你可以使用基本的文本调试方法：

console.log(String)

console.info(String)

console.warn(String)

console.error(String)

其它的控制台方法不会引发错误，但是可能表现的和你对其它浏览器预期的不一样。

在WebView中使用控制台API

当你在

WebView

中调试时，上面列出的所有的控制台API同样可用。如果你的目标是Android 2.1(API Level 7)或更高版本，你必须提供一个

WebChromeClient

，在它里边实现

onConsoleMessage()

方法以便可以让控制台消息在logcat中显示。然后，使用

setWebChromeClient()

方法将

WebChromeClient

应用到你的

WebView

中。

比如，要支持API Level 7，为

onConsoleMessage(String, int, String)

方法编写的代码可能看起来是这样：

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或者更高，作为替代，你应该实现

onConsoleMessage(ConsoleMessage)

方法。比如：

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()

查询消息的等级从而确定消息的严重性，然后使用合适的

Log

方法或者采取其它合适的行动。

无论你使用

onConsoleMessage(String, int, String)

方法或者

onConsoleMessage(ConsoleMessage)

方法，当你在web页面中执行一个控制台方法时，Android调用合适的

onConsoleMessage()

方法使得你可以报告错误。比如，使用上面的示例代码，会打印形如下面的一条logcat消息：

Hello World -- From line 82 of http://www.example.com/hello.html[/code] 
回到专题 Web应用