แก้ไขข้อบกพร่องจากระยะไกลสำหรับเนื้อหาแบบสดบนอุปกรณ์ Android จากคอมพิวเตอร์ Windows, Mac หรือ Linux ของคุณ บทแนะนำนี้จะสอนวิธีการต่อไปนี้
- ตั้งค่าอุปกรณ์ Android สำหรับการแก้ไขข้อบกพร่องจากระยะไกล และดูได้จากเครื่องการพัฒนาของคุณ
- ตรวจสอบและแก้ไขข้อบกพร่องของเนื้อหาสดในอุปกรณ์ Android จากเครื่องพัฒนาซอฟต์แวร์
- เนื้อหา Screencast จากอุปกรณ์ Android ไปยังอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บในเครื่องการพัฒนาของคุณ
ขั้นตอนที่ 1: สำรวจอุปกรณ์ Android
เวิร์กโฟลว์ด้านล่างนี้จะใช้ได้กับผู้ใช้ส่วนใหญ่ โปรดดูที่การแก้ปัญหา: เครื่องมือสำหรับนักพัฒนาเว็บไม่พบอุปกรณ์ Android สำหรับความช่วยเหลือเพิ่มเติม
- เปิดหน้าจอตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ใน Android ดูกำหนดค่าตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ในอุปกรณ์
- เลือกเปิดใช้การแก้ไขข้อบกพร่อง USB
- เปิด Chrome ในเครื่องพัฒนาซอฟต์แวร์
- ไปที่
chrome://inspect#devices ตรวจสอบว่า
สำรวจอุปกรณ์ 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 คุณจะเห็นเมนูสำหรับหยุดชั่วคราว โฟกัส โหลดซ้ำ หรือปิดแท็บ
ตรวจสอบองค์ประกอบ
ไปที่แผงองค์ประกอบของอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บ และวางเมาส์เหนือองค์ประกอบเพื่อไฮไลต์องค์ประกอบในวิวพอร์ตของอุปกรณ์ Android
หรือจะแตะองค์ประกอบในหน้าจออุปกรณ์ Android เพื่อเลือกองค์ประกอบนั้นในแผงองค์ประกอบก็ได้
คลิกเลือกองค์ประกอบ 
ในอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บ แล้วแตะองค์ประกอบในหน้าจออุปกรณ์ Android โปรดทราบว่าเลือกองค์ประกอบจะถูกปิดใช้หลังจากสัมผัสครั้งแรก คุณจึงต้องเปิดใช้ฟีเจอร์นี้อีกครั้งทุกครั้งที่คุณต้องการใช้ฟีเจอร์นี้
ส่งหน้าจอ 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 หรือคุณจะอ่านคู่มือที่เก่ากว่านี้ก็ได้