调试 Web 应用

如果您在搭载 Android 4.4 或更高版本的设备上测试 Web 应用,则可以使用 Chrome 开发者工具在 WebView 中远程调试网页,同时继续支持旧版 Android。如需了解详情,请参阅 Android 上的远程调试

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

请参阅以下相关资源:

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

当您调用 console 函数(在 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) 的代码可能如下所示:

Kotlin

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.webChromeClient = object : WebChromeClient() {

        override fun onConsoleMessage(message: String, lineNumber: Int, sourceID: String) {
            Log.d("MyApplication", "$message -- From line $lineNumber of $sourceID")
        }
    }
    

Java

    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)。例如:

Kotlin

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.webChromeClient = object : WebChromeClient() {

        override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
            consoleMessage?.apply {
                Log.d("MyApplication", "${message()} -- From line ${lineNumber()} of ${sourceId()}")
            }
            return true
        }
    }
    

Java

    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
    

Logcat

Logcat 是一个用于转储系统消息日志的工具。具体消息包括设备抛出错误时的堆栈轨迹,以及从应用写入和使用 JavaScript console API 写入的日志消息。

要运行 logcat 并查看 Android Studio 中的消息,请依次选择 View > Tool Windows > Logcat

如需了解详情,请参阅使用 Logcat 写入和查看日志