แก้ไขข้อบกพร่องโดยใช้บันทึกของคอนโซล JavaScript

เอกสารนี้อธิบายวิธีการต่างๆ ในการดูบันทึกคอนโซล JavaScript เพื่อแก้ไขข้อบกพร่องของเนื้อหาภายใน WebView

การเข้าถึงคอนโซล JavaScript ช่วยให้คุณดูข้อผิดพลาด คำเตือน และข้อความที่กำหนดเองจากคำสั่ง `console.log()` ของ JavaScript เพื่อวินิจฉัยสิ่งที่เกิดขึ้นภายใน WebViewconsole.log() โดยมี 3 วิธีในการดูข้อความคอนโซล JavaScript ที่สร้างโดย WebView ดังนี้

หากคุณแสดงเนื้อหาจากเว็บเซิร์ฟเวอร์ภายในเครื่องคอมพิวเตอร์สำหรับการพัฒนาซอฟต์แวร์ โปรดดู เข้าถึงเว็บเซิร์ฟเวอร์การพัฒนาซอฟต์แวร์ภายในจาก WebView เพื่อดูวิธีเชื่อมต่อจากอุปกรณ์หรือโปรแกรมจำลอง

ดักจับข้อความด้วย onConsoleMessage()

ระบบรองรับ API ของคอนโซลเมื่อแก้ไขข้อบกพร่องของ WebView คุณต้องระบุ WebChromeClient ที่ใช้เมธอด onConsoleMessage() เพื่อให้ ข้อความคอนโซลปรากฏใน Logcat จากนั้นใช้ WebChromeClient กับ WebView ด้วย setWebChromeClient()

WebChromeClient เป็นคลาสตัวช่วยสำหรับ WebView ซึ่งจะจัดการเหตุการณ์ที่เกี่ยวข้องกับ UI ที่เกิดขึ้นในเนื้อหาเว็บ เช่น การแสดงการแจ้งเตือน JavaScript การเปลี่ยนชื่อหน้าเว็บ และการจัดการข้อความที่ส่งไปยังคอนโซลของเบราว์เซอร์

โค้ดต่อไปนี้กำหนดค่า WebChromeClient เพื่อดักจับเอาต์พุตคอนโซล JavaScript และเปลี่ยนเส้นทางไปยัง Logcat เพื่อให้แก้ไขข้อบกพร่องได้ง่ายขึ้น

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;
    }
});

การใช้ onConsoleMessage() จะทำให้ตรรกะการบันทึกที่กำหนดเองกลายเป็นตัวแฮนเดิลหลักสำหรับข้อผิดพลาด JavaScript มีผลแทนลักษณะการทำงานเริ่มต้นของแฟล็ก webview-log-js-console-messages และช่วยให้คุณจัดรูปแบบบันทึกได้ตามต้องการ

ConsoleMessage ยังมีออบเจ็กต์ MessageLevel เพื่อ ระบุประเภทของข้อความคอนโซลที่ส่ง คุณสามารถค้นหาระดับข้อความด้วย messageLevel() เพื่อกำหนดความรุนแรงของข้อความ จากนั้นใช้เมธอด Log ที่เหมาะสมหรือดำเนินการอื่นๆ ที่เหมาะสม

เมื่อคุณเรียกใช้เมธอดคอนโซลในหน้าเว็บ Android จะเรียกใช้เมธอด onConsoleMessage(ConsoleMessage) เพื่อให้คุณรายงานข้อผิดพลาดได้ ตัวอย่างเช่น โค้ดตัวอย่างจะพิมพ์ข้อความ Logcat ที่มีลักษณะดังนี้

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