แก้ไขข้อบกพร่องของเนื้อหาสดจากระยะไกลบนอุปกรณ์ Android จากคอมพิวเตอร์ Windows, Mac หรือ Linux ช่วงเวลานี้ จะสอนวิธีทำสิ่งต่อไปนี้
- ตั้งค่าอุปกรณ์ Android สำหรับการแก้ไขข้อบกพร่องจากระยะไกล และสำรวจอุปกรณ์ดังกล่าวจากเครื่องพัฒนา
- ตรวจสอบและแก้ไขข้อบกพร่องของเนื้อหาสดในอุปกรณ์ Android จากเครื่องพัฒนา
- เนื้อหา Screencast จากอุปกรณ์ Android ไปยังอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บในเครื่องการพัฒนา
ขั้นตอนที่ 1: สำรวจอุปกรณ์ Android
เวิร์กโฟลว์ด้านล่างนี้เหมาะสำหรับผู้ใช้ส่วนใหญ่ โปรดดูการแก้ปัญหา: เครื่องมือสำหรับนักพัฒนาเว็บไม่พบอุปกรณ์ Android อุปกรณ์เพื่อรับความช่วยเหลือเพิ่มเติม
- เปิดหน้าจอตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ใน Android โปรดดูกำหนดค่านักพัฒนาแอปในอุปกรณ์ ตัวเลือก
- เลือกเปิดใช้การแก้ไขข้อบกพร่อง USB
- เปิด Chrome ในเครื่องการพัฒนา
- ไปที่
chrome://inspect#devices ตรวจสอบว่าเปิดใช้
Discover USB อยู่
เชื่อมต่ออุปกรณ์ Android กับเครื่องพัฒนาซอฟต์แวร์โดยตรงโดยใช้สาย USB
หากคุณเชื่อมต่ออุปกรณ์เป็นครั้งแรก อุปกรณ์จะแสดงสถานะเป็น "ออฟไลน์" และรอการตรวจสอบสิทธิ์
ในกรณีนี้ ให้ยอมรับข้อความแจ้งเซสชันการแก้ไขข้อบกพร่องบนหน้าจออุปกรณ์
หากคุณเห็นชื่อรุ่นของอุปกรณ์ Android แสดงว่าเครื่องมือสำหรับนักพัฒนาเว็บสร้างการเชื่อมต่อกับอุปกรณ์เรียบร้อยแล้ว
จากนั้นทำขั้นตอนที่ 2 ต่อไป
การแก้ปัญหา: เครื่องมือสำหรับนักพัฒนาเว็บไม่พบอุปกรณ์ Android
ตรวจสอบว่าได้ตั้งค่าฮาร์ดแวร์ไว้อย่างถูกต้อง ดังนี้
- หากใช้ฮับ USB ให้ลองเชื่อมต่ออุปกรณ์ Android กับเครื่องพัฒนาซอฟต์แวร์โดยตรง แทน
- ลองถอดสาย USB ระหว่างอุปกรณ์ Android กับเครื่องพัฒนา จากนั้น เสียบปลั๊กกลับเข้าไปอีกครั้ง ดำเนินการดังกล่าวขณะที่หน้าจอ Android และหน้าจอของเครื่องสำหรับการพัฒนาไม่ได้ล็อกอยู่
- ตรวจสอบว่าสาย USB ใช้งานได้ คุณควรจะตรวจสอบไฟล์ในอุปกรณ์ Android ได้ จากเครื่องพัฒนา
ตรวจสอบว่าได้ตั้งค่าซอฟต์แวร์ไว้อย่างถูกต้อง ดังนี้
- หากเครื่องสำหรับการพัฒนาใช้ Windows ให้ลองติดตั้งไดรเวอร์ USB สำหรับ อุปกรณ์ Android โปรดดูหัวข้อติดตั้งไดรเวอร์ USB ของ OEM
- อุปกรณ์ Windows และ Android บางรุ่น (โดยเฉพาะ Samsung) ต้องมีการตั้งค่าเพิ่มเติม โปรดดู อุปกรณ์ Chrome DevTools ไม่พบอุปกรณ์เมื่อเสียบปลั๊ก
หากไม่เห็นข้อความแจ้งอนุญาตการแก้ไขข้อบกพร่อง USB ในอุปกรณ์ Android ให้ลองทำดังนี้
- ยกเลิกการเชื่อมต่อแล้วเชื่อมต่อสาย USB อีกครั้งขณะที่เครื่องมือสำหรับนักพัฒนาเว็บโฟกัสที่การพัฒนาซอฟต์แวร์ เครื่องและหน้าจอหลักของ Android กำลังแสดงอยู่ กล่าวคือ บางครั้งข้อความแจ้งไม่แสดง เมื่อหน้าจอล็อกของ Android หรือเครื่องสำหรับการพัฒนา
- กำลังอัปเดตการตั้งค่าการแสดงผลสำหรับอุปกรณ์ Android และเครื่องพัฒนาซอฟต์แวร์เพื่อไม่ให้การตั้งค่าเหล่านี้ ไปนอน
- กำลังตั้งค่าโหมด USB ของ Android เป็น PTP โปรดดูที่ Galaxy S4 ไม่แสดงกล่องโต้ตอบการแก้ไขข้อบกพร่องของ USB
- เลือกเพิกถอนการให้สิทธิ์การแก้ไขข้อบกพร่อง USB จากหน้าจอตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์บนหน้าจอ อุปกรณ์ Android เพื่อรีเซ็ตอุปกรณ์เป็นสถานะใหม่
ถ้าคุณพบวิธีแก้ปัญหาที่ไม่ได้ระบุไว้ในส่วนนี้หรือในอุปกรณ์ Chrome DevTools ไม่ ตรวจพบอุปกรณ์เมื่อเสียบปลั๊ก โปรดเพิ่มคำตอบสำหรับคำถามใน Stack Overflow หรือเปิด ในที่เก็บ developer.chrome.com!
ขั้นตอนที่ 2: แก้ไขข้อบกพร่องของเนื้อหาในอุปกรณ์ Android จากเครื่องพัฒนา
- เปิด Chrome ในอุปกรณ์ Android
ใน
chrome://inspect/#devicesบนเครื่องพัฒนา คุณจะเห็นชื่อรุ่นของอุปกรณ์ Android ตามด้วย หมายเลขซีเรียล ทางด้านล่างคุณจะเห็นเวอร์ชันของ Chrome ที่ทำงานอยู่ในอุปกรณ์ พร้อมหมายเลขเวอร์ชันในวงเล็บ
ในกล่องข้อความเปิดแท็บด้วย URL ให้ป้อน URL แล้วคลิกเปิด หน้านี้จะเปิดใน แท็บใหม่บนอุปกรณ์ Android ของคุณ
แท็บ Chrome ระยะไกลแต่ละแท็บจะมีส่วนของตัวเองใน
chrome://inspect/#devicesคุณโต้ตอบกับแท็บนั้นได้จากส่วนนี้ หากมีแอปที่ใช้ WebView คุณจะเห็นส่วนของแต่ละแอปเหล่านั้นด้วย ในตัวอย่างนี้จะเปิดเพียงแท็บเดียวคลิกตรวจสอบข้าง URL ที่เพิ่งเปิด อินสแตนซ์ใหม่สำหรับเครื่องมือสำหรับนักพัฒนาเว็บจะเปิดขึ้น
เวอร์ชันของ Chrome ที่ทำงานในอุปกรณ์ Android จะเป็นตัวกำหนดเวอร์ชันของเครื่องมือสำหรับนักพัฒนาเว็บที่เปิดในเครื่องการพัฒนาของคุณ ดังนั้น หากอุปกรณ์ Android ใช้ Chrome เวอร์ชันเก่ามาก อินสแตนซ์ของเครื่องมือสำหรับนักพัฒนาเว็บอาจดูแตกต่างจากที่คุณคุ้นเคยอย่างมาก
การดําเนินการเพิ่มเติม: หยุดชั่วคราว โฟกัส โหลดซ้ำ หรือปิดแท็บ
ใต้ URL คุณจะเห็นเมนูสำหรับหยุดชั่วคราว โฟกัส โหลดซ้ำ หรือปิดแท็บ
ตรวจสอบองค์ประกอบ
ไปที่แผงElementsของอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บ แล้ววางเมาส์เหนือองค์ประกอบเพื่อไฮไลต์ วิวพอร์ตของอุปกรณ์ Android
หรือจะแตะองค์ประกอบบนหน้าจออุปกรณ์ Android เพื่อเลือกในแผงElementsก็ได้
คลิกเลือกองค์ประกอบ 
ในอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บ แล้วแตะองค์ประกอบนั้นในหน้าจออุปกรณ์ Android โปรดทราบว่าระบบจะปิดใช้เลือกองค์ประกอบหลังจากแตะครั้งแรก คุณจึงต้องเปิดใช้ใหม่ทุกครั้งที่ต้องการใช้ฟีเจอร์นี้
Screencast หน้าจอ Android ไปยังเครื่องพัฒนา
คลิกสลับ Screencast
เพื่อดู
เนื้อหาของอุปกรณ์ Android ในอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บ
คุณโต้ตอบกับ Screencast ได้หลายวิธีดังนี้
- ระบบจะแปลงการคลิกเป็นการแตะ ซึ่งจะเริ่มเหตุการณ์การแตะที่เหมาะสมในอุปกรณ์
- ระบบจะส่งการกดแป้นพิมพ์ในคอมพิวเตอร์ไปยังอุปกรณ์
- หากต้องการจำลองการบีบนิ้ว ให้กด Shift ค้างไว้ขณะลาก
- หากต้องการเลื่อน ให้ใช้แทร็กแพดหรือลูกกลิ้งเมาส์ หรือสะบัดด้วยตัวชี้เมาส์
หมายเหตุเกี่ยวกับ Screencast
- Screencast แสดงเฉพาะเนื้อหาของหน้าเว็บ ส่วนที่โปร่งใสของ Screencast แสดงถึงอุปกรณ์ เช่น แถบที่อยู่ของ Chrome, แถบสถานะ Android หรือแป้นพิมพ์ Android
- Screencast จะมีผลเสียต่ออัตราเฟรม ปิดใช้การเผยแพร่หน้าจอขณะวัดการเลื่อน หรือ ภาพเคลื่อนไหวเพื่อให้เห็นภาพประสิทธิภาพของหน้าที่ถูกต้องมากขึ้น
- หากล็อกหน้าจออุปกรณ์ Android เนื้อหาของ Screencast จะหายไป ปลดล็อก หน้าจออุปกรณ์ Android เพื่อเล่น Screencast ต่อโดยอัตโนมัติ
แก้ไขข้อบกพร่องด้วยตนเองผ่าน Android Debug Bridge (adb)
ในบางกรณีที่เกิดขึ้นไม่บ่อยนัก การแก้ไขข้อบกพร่องจากระยะไกลด้วยวิธีอื่นอาจเป็นประโยชน์ ตัวอย่างเช่น คุณอาจต้องการเชื่อมต่อกับโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP) ของ Chrome ใน Android โดยตรง
โดยใช้ Android Debug Bridge (adb) โดยทำดังนี้
- ตรวจสอบว่าได้เปิดใช้ตัวเลือกสำหรับนักพัฒนาแอปและการแก้ไขข้อบกพร่อง USB ในอุปกรณ์ Android แล้ว
- เปิด Chrome ในอุปกรณ์ Android
เชื่อมต่ออุปกรณ์ Android กับเครื่องพัฒนาด้วยวิธีต่อไปนี้
- สาย USB (ตรงไปตรงมา)
- อีกวิธีหนึ่งคือ การเชื่อมต่อ Wi-Fi กับ adb
ในบรรทัดคำสั่งของเครื่องพัฒนา ให้เรียกใช้
adb devices -lและตรวจสอบว่ามีอุปกรณ์อยู่ในรายการหรือไม่ส่งต่อซ็อกเก็ต CDP ในอุปกรณ์ไปยังพอร์ตภายในของเครื่อง เช่น
9222หากต้องการทำเช่นนี้ ให้เรียกใช้adb forward tcp:9222 localabstract:chrome_devtools_remoteเมื่อเชื่อมต่อเรียบร้อยแล้ว ให้ดูว่า
http://localhost:9222/jsonแสดงเป้าหมายpageของคุณhttp://localhost:9222/json/versionจะแสดงปลายทางเป้าหมายbrowserตามเอกสารประกอบของ CDP- ระบบจะป้อนข้อมูล
chrome://inspect/#devicesไว้ แม้ว่าจะไม่ได้เลือกการตั้งค่าสำรวจอุปกรณ์ USB ไว้ก็ตาม
สำหรับการแก้ปัญหา โปรดดูที่
- เอกสารประกอบเกี่ยวกับ
adb หรือคุณจะอ่านคำแนะนำเก่าดังนี้ก็ได้