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

你可能感兴趣的:(android,调试,Web应用)