แก้ไขข้อบกพร่องโดยใช้แอปเครื่องมือสำหรับนักพัฒนาเว็บของ WebView

แอป WebView DevTools เป็นยูทิลิตีในอุปกรณ์สําหรับการจัดการและแก้ไขข้อบกพร่องของ คอมโพเนนต์ WebView ของระบบเอง ซึ่งแยกจากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่ทำงานในเครื่องมือพัฒนาและช่วยให้คุณแก้ไขข้อบกพร่องของเนื้อหาเว็บที่เผยแพร่อยู่ (HTML, CSS และ JavaScript) จากระยะไกลซึ่งทำงานภายในอินสแตนซ์ของ WebView

WebView DevTools เป็นแอปที่ใช้ร่วมกันซึ่งจะติดตั้งใน อุปกรณ์โดยอัตโนมัติพร้อมกับคอมโพเนนต์ระบบ WebView แอปแบ่งออกเป็น 4 ส่วน ดังนี้

• หน้าแรก: ดูข้อมูลเวอร์ชันและเปลี่ยน WebView เริ่มต้นเป็นเวอร์ชันช่องก่อนเปิดตัว
• ข้อขัดข้อง: แสดงและอัปโหลดรายงานข้อขัดข้องของ WebView
• Flags: ตั้งค่า Flags ของนักพัฒนาแอปเพื่อเปลี่ยนลักษณะการทำงานของ WebView
• บันทึกเครือข่าย: แสดงและแชร์บันทึกเครือข่ายระดับต่ำของ WebView

เรียกใช้เครื่องมือสำหรับนักพัฒนาเว็บของ WebView

ในอุปกรณ์ที่ใช้ Android 16 ขึ้นไปซึ่งเปิดใช้โหมดนักพัฒนาแอป คุณสามารถ เปิดใช้ WebView DevTools ได้โดยไปที่การตั้งค่า > ระบบ > ตัวเลือกสำหรับนักพัฒนาแอป > WebView DevTools

ใน Android เวอร์ชันล่าสุดทั้งหมด คุณสามารถเปิดใช้เครื่องมือสำหรับนักพัฒนาเว็บ WebView โดยใช้คำสั่ง adb ได้ดังนี้

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

หรือหากติดตั้งช่องเวอร์ชันก่อนเผยแพร่ของ WebView เช่น Beta, Dev หรือ Canary คุณจะใช้ไอคอนตัวเรียกใช้เครื่องมือสำหรับนักพัฒนาเว็บของ WebView ได้

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

เปลี่ยนไปใช้ช่องเวอร์ชันก่อนเปิดตัว

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

1. ติดตั้ง WebView เวอร์ชันเบต้า Dev หรือ Canary โดยขึ้นอยู่กับ การแลกเปลี่ยนที่คุณต้องการระหว่างความเสถียรและการเข้าถึงการเปลี่ยนแปลงล่าสุด
2. เปิดแอป WebView DevTools แล้วแตะเปลี่ยนผู้ให้บริการ
3. หากไม่เห็นตัวเลือกดังกล่าว ให้แตะจุด 3 จุดที่มุมขวาบน แล้วเลือกเปลี่ยนผู้ให้บริการ WebView

ดูข้อมูลเพิ่มเติมได้ที่ลองใช้ WebView เวอร์ชันเบต้า, Dev หรือ Canary

แชแนล WebView

เวอร์ชัน WebView จะอิงตามเวอร์ชันการเผยแพร่ของ Chrome แต่ละแชแนล แสดงถึงระดับความเสถียรและความใหม่ของโค้ดที่แตกต่างกัน ต่อไปนี้เป็นข้อมูลสรุปคร่าวๆ เกี่ยวกับเวลาที่ควรใช้ช่อง WebView แต่ละช่อง

• Canary: อัปเดตทุกวัน ช่องนี้มีการเปลี่ยนแปลงล่าสุด ซึ่งรวมถึง ฟีเจอร์ใหม่และการแก้ไขข้อบกพร่องทันทีที่มีการผสานรวมเข้ากับโค้ดเบส Chromium ใช้ตัวเลือกนี้หากต้องการทดสอบว่าเว็บแอปทำงานใน WebView อย่างไรเมื่อมีการเปลี่ยนแปลงที่ผสานรวมล่าสุด แต่โปรดทราบว่าช่องนี้อาจไม่เสถียรหรือมีข้อบกพร่อง

• เวอร์ชันที่กำลังพัฒนา: อัปเดตสัปดาห์ละ 1-2 ครั้ง เวอร์ชันนี้เสถียรกว่า Canary แต่ก็ยังมีการเปลี่ยนแปลงที่ล้ำสมัย เหมาะสำหรับนักพัฒนาซอฟต์แวร์ที่ ต้องการทดสอบฟีเจอร์ใหม่ๆ แต่มีความเสี่ยงที่จะเกิดข้อบกพร่องที่ไม่เกี่ยวข้องน้อยกว่า Canary

• เบต้า: อัปเดตทุกสัปดาห์โดยประมาณ และอัปเดตครั้งสำคัญทุก 4 สัปดาห์ โดยเวอร์ชันนี้จะมีตัวอย่างฟีเจอร์ใน WebView เวอร์ชันเสถียรเวอร์ชันถัดไปให้คุณลองใช้ก่อน 4-6 สัปดาห์ก่อนที่จะเปิดตัวเวอร์ชันเสถียร ใช้ตัวเลือกนี้เพื่อทดสอบเว็บแอปกับ WebView เวอร์ชันที่กำลังจะเปิดตัวเพื่อยืนยันความเข้ากันได้

• เสถียร: อัปเดตทุก 4 สัปดาห์สำหรับการเปิดตัวเวอร์ชันหลัก และอัปเดตทุก 2-3 สัปดาห์สำหรับการเปิดตัวเวอร์ชันรองเพื่อแก้ไขข้อบกพร่องเร่งด่วน นี่คือช่องเวอร์ชันที่ใช้งานจริงของ WebView ซึ่งเปิดตัวให้กับผู้ใช้ทุกคน เป็นเวอร์ชันที่มีเสถียรภาพมากที่สุดเนื่องจากผ่านการทดสอบในเวอร์ชันอื่นๆ มาแล้ว ใช้ตัวเลือกนี้หากต้องการทดสอบเว็บแอปใน WebView เหมือนกับที่ผู้ใช้ส่วนใหญ่ทำในปัจจุบัน ซึ่งอาจเป็นการจำลองข้อบกพร่องที่ผู้ใช้รายงาน

UI การขัดข้อง

หากพบว่า WebView ขัดข้องขณะพัฒนาแอป คุณสามารถแสดง อัปโหลด และรายงานข้อบกพร่องเกี่ยวกับ WebView ได้โดยใช้ WebView DevTools

1. หลังจากแอปขัดข้อง ให้รีสตาร์ทแอปเพื่อให้แน่ใจว่าระบบจะสร้างรายงานข้อขัดข้อง
2. เปิดแอป WebView DevTools แล้วแตะข้อขัดข้อง

ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับ UI ของข้อขัดข้อง

UI การแจ้งว่าไม่เหมาะสม

แอป WebView DevTools ช่วยให้คุณตั้งค่า Flag ที่มีประโยชน์หลายอย่างเพื่อเปลี่ยน ลักษณะการทำงานของ WebView ทั้งหมดในอุปกรณ์ได้ โดยส่วนใหญ่จะใช้ Flag สำหรับ การพัฒนา WebView เองเท่านั้น แต่ก็มีบางรายการที่เป็นประโยชน์สำหรับนักพัฒนาแอป Android

• highlight-all-webviews: ระบุ WebView โดยการเพิ่มสีเหลืองอ่อนไว้ด้านบน
• net-log: เปิดใช้การบันทึกกิจกรรมเครือข่าย WebView ระดับต่ำ
• webview-log-js-console-messages: ทำให้บันทึกคอนโซล JavaScript ปรากฏใน Logcat

ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับ UI ของฟีเจอร์ที่ทดลองใช้

บันทึกเครือข่าย

หากแก้ปัญหาการเชื่อมต่อเซิร์ฟเวอร์ใน WebView โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ไม่ได้ ให้ใช้เครื่องมือสำหรับนักพัฒนาเว็บของ WebView เพื่อบันทึกบันทึกเครือข่ายระดับต่ำ

1. เปิดใช้การแก้ไขข้อบกพร่องของ WebView ในโค้ดของแอป
2. ในเครื่องมือสำหรับนักพัฒนาเว็บ WebView ให้เปิด Flags ค้นหา net-log แล้วเปิด รีสตาร์ทแอปเพื่อให้ฟีเจอร์นี้มีผล
3. ทําการกระทําที่ทําให้เกิดลักษณะการทํางานของเครือข่ายที่คุณต้องการแก้ไขข้อบกพร่อง หลังจาก ทำซ้ำปัญหาแล้ว ให้ปิดแอป
4. เปิดส่วนบันทึกเครือข่ายของ WebView DevTools เพื่อค้นหาและแชร์ไฟล์บันทึกเครือข่าย
5. คุณโหลดไฟล์บันทึก JSON ลงใน Netlog Viewer ซึ่งเป็นเครื่องมือออนไลน์ สำหรับการแสดงภาพบันทึกเครือข่าย เพื่อตรวจสอบเหตุการณ์เครือข่ายระดับต่ำ ซ็อกเก็ต และรายละเอียดเวลาได้

ดูข้อมูลเพิ่มเติมได้ที่การแก้ไขข้อบกพร่องของเครือข่ายใน WebView