แก้ไขข้อบกพร่องของเว็บแอป

คุณสามารถดีบัก JavaScript ได้โดยใช้ console JavaScript API และมุมมอง ข้อความเอาต์พุตใน Logcat หากคุณคุ้นเคยกับการแก้ไขข้อบกพร่องของหน้าเว็บด้วย Firebug หรือ Web Inspector คุณอาจคุ้นเคยกับการใช้ console (เช่น console.log()) เฟรมเวิร์ก WebKit ของ Android สนับสนุน API เพื่อช่วยให้คุณได้รับบันทึกจากหน้าเว็บเมื่อแก้ไขข้อบกพร่องใน WebView หัวข้อนี้จะอธิบายวิธีใช้ API ของคอนโซลสำหรับแก้ไขข้อบกพร่อง

ใช้ API ของคอนโซลใน WebView

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

ตัวอย่างต่อไปนี้แสดงวิธีใช้ API ของคอนโซลใน WebView

Kotlin

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

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

Java

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.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

แหล่งข้อมูลเพิ่มเติมที่เกี่ยวข้องกับการแก้ไขข้อบกพร่องมีดังนี้

ทดสอบฟีเจอร์เว็บเวอร์ชันทดลอง

เช่นเดียวกับหน้า chrome://flags ของ Google Chrome คุณสามารถทดสอบเวอร์ชันทดลองได้ด้วย ฟีเจอร์บนเว็บใน WebView

โดยทำตามขั้นตอนต่อไปนี้

  1. ติดตั้งหนึ่งใน WebView รุ่นทดลอง ช่อง (beta, dev หรือ canary){: .external}

  2. เปลี่ยน WebView ช่อง ในอุปกรณ์ทดสอบไปยังเวอร์ชันก่อนเผยแพร่ที่ติดตั้งไว้

  3. คลิก Launcher ของ WebView DevTools โดยทำดังนี้


    รูปที่ 1 ไอคอน WebView DevTools สำหรับแอปที่ติดตั้งบน อุปกรณ์

  4. คลิกแฟล็กจากเครื่องมือสำหรับนักพัฒนาเว็บ แล้วค้นหาฟีเจอร์ทดลอง ที่ต้องการเปิดหรือปิดใช้งาน การเปลี่ยนแปลงจะมีผลกับอินสแตนซ์ WebView รายการทั้งหมดใน อุปกรณ์

  5. หยุดและรีสตาร์ทแอปเพื่อเริ่มทดสอบกับฟีเจอร์ใหม่

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการสลับการติดธงทำเครื่องหมายในWebViewเครื่องมือสำหรับนักพัฒนาเว็บ เอกสารประกอบ