调试Web应用程序

朱雀 2022-06-07 00:52 220阅读 0赞

原始文章：[https://developer.android.com/guide/webapps/debugging.html][https_developer.android.com_guide_webapps_debugging.html]

如果您使用运行Android 4.4或更高版本的设备测试网络应用程序，则可以使用Chrome开发人员工具在WebView中远程调试网页，同时继续支持旧版Android。 有关详细信息，请参阅[Android上的远程调试][Android]

如果您没有运行Android 4.4或更高版本的设备，则可以使用控制台JavaScript API调试JavaScript，并将输出消息查看到logcat。 如果您熟悉使用Firebug或Web Inspector调试网页，那么您可能熟悉使用控制台（如console.log（））。 Android的WebKit框架支持大多数相同的API，因此您可以在Android浏览器或自己的WebView中调试时从网页接收日志。 本文档介绍如何使用控制台API进行调试。

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

当您调用控制台功能（在DOM的window.console对象中）时，输出将显示在logcat中。 例如，如果您的网页执行以下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级别7）及更高版本，则必须提供实现onConsoleMessage（）方法的WebChromeClient，以便控制台消息显示在logcat中。 然后，使用setWebChromeClient（）将WebChromeClient应用到WebView。

例如，为了支持API级别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级别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），Android都会调用相应的onConsoleMessage（）方法，以便您可以报告错误。 例如，使用上面的示例代码，将打印出如下所示的logcat消息：

Hello World -- From line 82 of http://www.example.com/hello.html

[https_developer.android.com_guide_webapps_debugging.html]: https://developer.android.com/guide/webapps/debugging.html
[Android]: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3