本篇文章翻译自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进行调试。
当你调用一个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同样可用。如果你的目标是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
回到专题 Web应用