แก้ไขข้อบกพร่องของเว็บแอป Canvas แบบอินเทอร์แอกทีฟด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

คุณสามารถแก้ไขข้อบกพร่องของเว็บแอป Canvas แบบอินเทอร์แอกทีฟได้โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โปรแกรมแก้ไขข้อบกพร่องของ Chrome ใช้ได้ในจออัจฉริยะของ Google Home หรือ Google Nest ที่ใช้ซอฟต์แวร์เวอร์ชัน 30 ขึ้นไป (การอัปเดตนี้จะเริ่มเปิดตัวในเดือนตุลาคม 2020) และเฟิร์มแวร์ของ Cast เวอร์ชัน 1.50 ขึ้นไป คุณตรวจสอบเวอร์ชันภายใต้ System settings / About device ในจออัจฉริยะได้

ตั้งค่าสภาพแวดล้อมของคุณ

ก่อนแก้ไขข้อบกพร่อง โปรดทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่าสภาพแวดล้อมอย่างถูกต้อง

  • เปิดใช้การดำเนินการสำหรับการทดสอบในเครื่องจำลองของคอนโซลการดำเนินการ
  • เชื่อมต่อเครื่องกับเครือข่าย LAN เดียวกันกับอุปกรณ์ Google Home หรือ Google Nest ที่คุณทดสอบ
  • ตรวจสอบว่าเครือข่ายของคุณไม่บล็อกแพ็กเก็ตระหว่างอุปกรณ์
  • ลงชื่อเข้าสู่ระบบด้วยบัญชี Google เดียวกันในคอนโซล Actions และในอุปกรณ์ Google Home หรือ Google Nest

เมื่อสภาพแวดล้อมพร้อมแล้ว คุณสามารถเปิดการดำเนินการบนจออัจฉริยะทดสอบได้

เชื่อมต่อเว็บแอป Canvas กับโปรแกรมแก้ไขข้อบกพร่อง

หากต้องการเชื่อมต่อเว็บแอป Canvas กับโปรแกรมแก้ไขข้อบกพร่อง Chrome DevTools ให้ทำตามขั้นตอนต่อไปนี้

  1. ติดตั้งและเปิดใช้เบราว์เซอร์ Google Chrome ในเครื่องการพัฒนาท้องถิ่น
  2. ในช่องที่อยู่ของเบราว์เซอร์ Chrome ให้ป้อน chrome://inspect#devices เพื่อเริ่มใช้งานเครื่องมือตรวจสอบ Chrome คุณจะเห็นรายการอุปกรณ์ในหน้านี้ และ URL ของ Canvas HTML ควรแสดงใต้ชื่ออุปกรณ์ Google Home หรือ Google Nest ทดสอบ โปรดทราบว่าอาจใช้เวลาสักระยะ เพื่อให้ Chrome ค้นพบอุปกรณ์ทั้งหมดในเครือข่าย
  3. คลิกลิงก์ inspect ใต้ URL ของ HTML เพื่อเปิด Chrome DevTools

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะโหลดในหน้าต่างของตัวเอง คุณสามารถคลิกปุ่ม Screencast () เพื่อดู GUI เว็บที่แสดงในอุปกรณ์ ภาพหน้าจอต่อไปนี้แสดงลักษณะที่เว็บแอปปรากฏในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

โปรดทราบว่าเว็บแอป Canvas จะโหลดใน iframe

เคล็ดลับในการแก้ไขข้อบกพร่อง

โปรดคำนึงถึงเคล็ดลับเพิ่มเติมต่อไปนี้ระหว่างการแก้ไขข้อบกพร่อง:

  • รีเฟรชหน้าใน Chrome DevTools เพื่อโหลดคอนเทนเนอร์ของแอป Fulfillment ในเครื่องซ้ำโดยใช้โค้ดล่าสุดจาก URL การพัฒนา
  • ตรวจสอบว่าแอป JavaScript โหลดโดยไม่มีข้อผิดพลาด หากต้องการดำเนินการนี้ ให้ตรวจสอบส่วน คอนโซลในหน้าเครื่องมือสำหรับนักพัฒนาเว็บ
  • เพิ่มเบรกพอยท์ที่กำหนดเองลงในโค้ดโดยใช้ debugger; ภายในโค้ดเว็บแอป
  • หากไม่เห็นอุปกรณ์ใน chrome://inspect#devices เป็นระยะเวลาหนึ่ง ให้รีเฟรชหน้าตรวจสอบ
  • หากต้องการแก้ไขข้อบกพร่องด้านประสิทธิภาพ ให้ทำตามบทแนะนำเริ่มต้นใช้งานการวิเคราะห์ประสิทธิภาพรันไทม์
  • เนื่องจากหน่วยความจำของจออัจฉริยะมีจำกัด เว็บแอปของคุณจึงอาจขัดข้องหรือค้างได้หากมีขนาดเกิน 200 MB หากต้องการแก้ไขข้อบกพร่องเกี่ยวกับหน่วยความจำ ให้ทำตามบทแนะนำการแก้ไขปัญหาเกี่ยวกับหน่วยความจำ
  • สำหรับข้อผิดพลาดในการดำเนินการตามคำสั่งซื้อ ให้ดูคำขอที่ส่งโดยเซิร์ฟเวอร์ของ Actions on Google ไปยังเว็บฮุคจากบันทึกเว็บฮุคหรือจากบันทึกของ Stackdriver