Gỡ lỗi bằng Nhật ký bảng điều khiển JavaScript

Tài liệu này mô tả các phương thức khác nhau để xem nhật ký bảng điều khiển JavaScript nhằm gỡ lỗi nội dung trong WebView.

Khi truy cập vào bảng điều khiển JavaScript, bạn có thể xem các lỗi, cảnh báo và thông báo tuỳ chỉnh từ các câu lệnh JavaScript console.log() để chẩn đoán những gì đang xảy ra bên trong WebView. Có 3 cách để xem các thông báo trên bảng điều khiển JavaScript do WebView của bạn tạo:

  • Công cụ dành cho nhà phát triển của Chrome: Kết nối WebView với Công cụ dành cho nhà phát triển của Chrome. Mở thẻ Bảng điều khiển để xem các thông báo trên bảng điều khiển JavaScript của WebView.

  • Ứng dụng Công cụ cho nhà phát triển WebView: Sử dụng ứng dụng Công cụ cho nhà phát triển WebView để bật cờ webview-log-js-console-messages trên thiết bị nhằm xem nhật ký bảng điều khiển trong Logcat.

  • Chặn thông báo: Chặn thông báo trong bảng điều khiển JavaScript bằng cách triển khai onConsoleMessage() trong WebChromeClient. Phương pháp này được trình bày chi tiết trong phần sau.

Nếu bạn đang phân phát nội dung từ một máy chủ web cục bộ trên máy phát triển, hãy xem phần Truy cập vào máy chủ phát triển cục bộ từ WebView để tìm hiểu cách kết nối với máy chủ đó từ một thiết bị hoặc trình mô phỏng.

Chặn tin nhắn bằng onConsoleMessage()

Các API bảng điều khiển được hỗ trợ khi gỡ lỗi WebView. Bạn phải cung cấp một WebChromeClient triển khai phương thức onConsoleMessage() để thông báo trên bảng điều khiển xuất hiện trong Logcat. Sau đó, hãy áp dụng WebChromeClient cho WebView bằng setWebChromeClient().

WebChromeClient là lớp trợ giúp cho WebView. Lớp này xử lý các sự kiện liên quan đến giao diện người dùng xảy ra trong nội dung web, chẳng hạn như hiển thị cảnh báo JavaScript, thay đổi tiêu đề của trang web và xử lý các thông báo được gửi đến bảng điều khiển của trình duyệt.

Mã sau đây định cấu hình một WebChromeClient để chặn các đầu ra của bảng điều khiển JavaScript và chuyển hướng các đầu ra đó đến Logcat để gỡ lỗi dễ dàng hơn.

Kotlin

val myWebView: WebView = findViewById(R.id.my_webview)
myWebView.webChromeClient = object : WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        // Log JavaScript console messages to Logcat
        Log.d("WebViewConsole", "${message.message()} -- From line ${message.lineNumber()} of ${message.sourceId()}")
        // Return true to indicate that the message has been handled
        return true
    }
}

Java

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        // Log JavaScript console messages to Logcat
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        // Return true to indicate that the message has been handled
        return true;
    }
});

Bằng cách sử dụng onConsoleMessage(), logic ghi nhật ký tuỳ chỉnh của bạn sẽ trở thành trình xử lý chính cho các lỗi JavaScript, thay thế hành vi mặc định của cờ webview-log-js-console-messages và cho phép bạn định dạng nhật ký theo cách bạn muốn.

ConsoleMessage cũng bao gồm một đối tượng MessageLevel để cho biết loại thông báo trên bảng điều khiển đang được gửi. Bạn có thể truy vấn cấp độ thông báo bằng messageLevel() để xác định mức độ nghiêm trọng của thông báo, sau đó sử dụng phương thức Log thích hợp hoặc thực hiện các hành động thích hợp khác.

Khi bạn thực thi một phương thức trên bảng điều khiển trong trang web của mình, Android sẽ gọi phương thức onConsoleMessage(ConsoleMessage) để bạn có thể báo cáo lỗi. Ví dụ: với đoạn mã mẫu, một thông báo Logcat sẽ được in ra có dạng như sau:

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