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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ภาพรวมของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เปิดใช้การเชื่อมต่อจากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

WebView ของแอปจะไม่เปิดใช้การเชื่อมต่อจาก Chrome DevTools โดยค่าเริ่มต้น คุณต้องเปิดใช้การแก้ไขข้อบกพร่องของ WebView ในโค้ดของแอปพลิเคชัน

1. ตรวจสอบว่าคุณได้ตั้งค่าให้เรียกใช้แอปในฮาร์ดแวร์หรืออุปกรณ์เสมือนแล้ว
2. เปิดใช้การแก้ไขข้อบกพร่องของ WebView ในโค้ดแอปพลิเคชันโดยเรียกใช้ setWebContentsDebuggingEnabled โดยปกติจะดำเนินการในคลาส Activity หรือ Application ที่มีการเริ่มต้น WebView

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

การแก้ไขข้อบกพร่องของ WebView จะไม่ได้รับผลกระทบจากสถานะของdebuggableแฟล็กในไฟล์ Manifest ของแอปพลิเคชัน หากต้องการเปิดใช้การแก้ไขข้อบกพร่องของ WebView เฉพาะเมื่อตั้งค่า debuggable เป็น true ให้ทดสอบแฟล็กนี้ที่รันไทม์ตามที่แสดงใน ตัวอย่างต่อไปนี้

Kotlin

if (applicationInfo.flags and ApplicationInfo.FLAG_DEBUGGABLE != 0) {
     WebView.setWebContentsDebuggingEnabled(true)
}

Java

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
     WebView.setWebContentsDebuggingEnabled(true);
}

เริ่มแก้ไขข้อบกพร่องของ WebView

หลังจากเปิดใช้การแก้ไขข้อบกพร่องของ WebView ในโค้ดแอปพลิเคชันและแอป ทํางานบนอุปกรณ์จริงหรือ Android Emulator แล้ว ให้เชื่อมต่อ Chrome DevTools กับ WebView โดยทําดังนี้

1. เปิด Chrome ในเครื่องที่ใช้พัฒนา
2. ไปที่chrome://inspect

3. ในหน้า chrome://inspect ให้ตรวจสอบว่าได้เลือกค้นหาอุปกรณ์ USB แล้ว ค้นหาอุปกรณ์ในส่วนเป้าหมายระยะไกล

   

   รูปที่ 1 เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะตรวจสอบหน้าเว็บที่แสดงเป้าหมายระยะไกลที่พร้อมสำหรับการแก้ไขข้อบกพร่อง

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

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

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