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

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

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

  • เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome: เชื่อมต่อ WebView กับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เปิดแท็บคอนโซลเพื่อดูข้อความคอนโซล JavaScript ของ WebView

  • แอปเครื่องมือสำหรับนักพัฒนาเว็บของ WebView: ใช้แอปเครื่องมือสำหรับนักพัฒนาเว็บของ WebView เพื่อเปิดใช้ webview-log-js-console-messages ในอุปกรณ์เพื่อดูบันทึกคอนโซล ใน Logcat

  • การสกัดกั้นข้อความ: สกัดกั้นข้อความคอนโซล JavaScript โดย การใช้ onConsoleMessage() ใน WebChromeClient แนวทางนี้ มีรายละเอียดอยู่ในส่วนต่อไปนี้

หากคุณแสดงเนื้อหาจากเว็บเซิร์ฟเวอร์ภายในในเครื่องที่ใช้พัฒนา โปรดดูเข้าถึงเซิร์ฟเวอร์การพัฒนาภายในจาก 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