แก้ไขข้อบกพร่องของเนื้อหาสดจากระยะไกลบนอุปกรณ์ 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 คุณจะเห็นเมนูสำหรับหยุดชั่วคราว โฟกัส โหลดซ้ำ หรือปิดแท็บ
ตรวจสอบองค์ประกอบ
ไปที่แผงองค์ประกอบของอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บ และวางเมาส์เหนือองค์ประกอบเพื่อไฮไลต์ในวิวพอร์ตของอุปกรณ์ Android
หรือจะแตะองค์ประกอบบนหน้าจออุปกรณ์ Android เพื่อเลือกในแผงองค์ประกอบก็ได้
คลิกเลือกองค์ประกอบ 
ในอินสแตนซ์เครื่องมือสำหรับนักพัฒนาเว็บ แล้วแตะองค์ประกอบนั้นในหน้าจออุปกรณ์ Android โปรดทราบว่าระบบจะปิดใช้เลือกองค์ประกอบหลังจากแตะครั้งแรก คุณจึงต้องเปิดใช้ใหม่ทุกครั้งที่ต้องการใช้ฟีเจอร์นี้
Screencast หน้าจอ Android ไปยังเครื่องพัฒนา
คลิก Toggle 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 หรือคุณจะอ่านคำแนะนำเก่าดังนี้ก็ได้