专题 - 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

---

回到专题 Web应用