การแก้ไขข้อบกพร่องระยะไกลของอุปกรณ์ Android

Kayce Basques

Sofia Emelianova

แก้ไขข้อบกพร่องของเนื้อหาสดในอุปกรณ์ Android จากคอมพิวเตอร์ Windows, Mac หรือ Linux จากระยะไกล บทแนะนำนี้จะสอนวิธีต่อไปนี้

• ตั้งค่าอุปกรณ์ Android สำหรับการแก้ไขข้อบกพร่องจากระยะไกล และค้นหาอุปกรณ์จากเครื่องสำหรับพัฒนาซอฟต์แวร์
• ตรวจสอบและแก้ไขข้อบกพร่องของเนื้อหาสดในอุปกรณ์ Android จากเครื่องสำหรับพัฒนาซอฟต์แวร์
• แคสต์เนื้อหาหน้าจอจากอุปกรณ์ Android ไปยังอินสแตนซ์ DevTools ในเครื่องสำหรับพัฒนาซอฟต์แวร์

ขั้นตอนที่ 1: ค้นหาอุปกรณ์ Android

เวิร์กโฟลว์ด้านล่างใช้ได้กับผู้ใช้ส่วนใหญ่ ดูความช่วยเหลือเพิ่มเติมที่การแก้ปัญหา: DevTools ไม่ตรวจพบอุปกรณ์ Android

1. เปิดหน้าจอตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ใน Android ดูกำหนดค่าตัวเลือกสำหรับนักพัฒนาแอปในอุปกรณ์
2. เลือกเปิดใช้การแก้ไขข้อบกพร่อง USB
3. เปิด Chrome ในเครื่องสำหรับพัฒนาซอฟต์แวร์
4. ไปที่ chrome://inspect#devices

5. ตรวจสอบว่าได้เปิดใช้ ค้นหาอุปกรณ์ USB แล้ว

   

6. เชื่อมต่ออุปกรณ์ Android กับเครื่องสำหรับพัฒนาโดยตรงโดยใช้สาย USB

7. หากคุณเชื่อมต่ออุปกรณ์เป็นครั้งแรก อุปกรณ์จะแสดงเป็น "ออฟไลน์" และอยู่ระหว่างการตรวจสอบสิทธิ์

   

   ในกรณีนี้ ให้ยอมรับข้อความแจ้งเกี่ยวกับเซสชันการแก้ไขข้อบกพร่องบนหน้าจอของอุปกรณ์

8. หากเห็นชื่อรุ่นของอุปกรณ์ Android แสดงว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สร้างการเชื่อมต่อกับอุปกรณ์ของคุณเรียบร้อยแล้ว

   

9. ไปยังขั้นตอนที่ 2

การแก้ปัญหา: เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ไม่ตรวจพบอุปกรณ์ Android

ตรวจสอบว่าตั้งค่าฮาร์ดแวร์อย่างถูกต้อง

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

ตรวจสอบว่าตั้งค่าซอฟต์แวร์อย่างถูกต้อง ดังนี้

• หากเครื่องสำหรับพัฒนาซอฟต์แวร์ใช้ Windows ให้ลองติดตั้งไดรเวอร์ USB สำหรับอุปกรณ์ Android ด้วยตนเอง โปรดดูติดตั้งไดรเวอร์ OEM USB
• อุปกรณ์ Windows และ Android บางรุ่น (โดยเฉพาะ Samsung) ต้องมีการตั้งค่าเพิ่มเติม โปรดดูหัวข้อเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ไม่ตรวจพบอุปกรณ์เมื่อเสียบ

หากไม่เห็นข้อความแจ้งอนุญาตการแก้ไขข้อบกพร่อง USB ในอุปกรณ์ Android ให้ลองทำดังนี้

• ถอดสาย USB ออกแล้วเสียบกลับเข้าไปใหม่ขณะที่ DevTools อยู่ในโฟกัสบนเครื่องสำหรับพัฒนาซอฟต์แวร์และหน้าจอหลักของ Android แสดงอยู่ กล่าวคือ บางครั้งพรอมต์จะไม่แสดงขึ้นเมื่อหน้าจอ Android หรือเครื่องสำหรับพัฒนาซอฟต์แวร์ล็อกอยู่
• อัปเดตการตั้งค่าการแสดงผลสำหรับอุปกรณ์ Android และเครื่องสำหรับพัฒนาซอฟต์แวร์เพื่อไม่ให้เข้าสู่โหมดสลีป
• การตั้งค่าโหมด USB ของ Android เป็น PTP ดูGalaxy S4 ไม่แสดงกล่องโต้ตอบการให้สิทธิ์การแก้ไขข้อบกพร่องผ่าน USB
• เลือกเพิกถอนการให้สิทธิ์การแก้ไขข้อบกพร่องผ่าน USB จากหน้าจอตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ในอุปกรณ์ Android เพื่อรีเซ็ตเป็นสถานะใหม่

หากพบวิธีแก้ปัญหาที่ไม่ได้กล่าวถึงในส่วนนี้หรือในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ไม่ตรวจพบอุปกรณ์เมื่อเสียบ โปรดเพิ่มคำตอบลงในคำถาม Stack Overflow นั้น หรือเปิดปัญหาในที่เก็บข้อมูล developer.chrome.com

ขั้นตอนที่ 2: แก้ไขข้อบกพร่องของเนื้อหาในอุปกรณ์ Android จากเครื่องสำหรับพัฒนาซอฟต์แวร์

1. เปิด Chrome ในอุปกรณ์ Android

2. ใน chrome://inspect/#devices บนเครื่องสำหรับพัฒนาซอฟต์แวร์ คุณจะเห็นชื่อรุ่นของอุปกรณ์ Android ตามด้วยหมายเลขซีเรียล ด้านล่างนั้น คุณจะเห็นเวอร์ชันของ Chrome ที่ใช้งานอยู่ในอุปกรณ์ โดยมีหมายเลขเวอร์ชันอยู่ในวงเล็บ

   

3. ในกล่องข้อความเปิดแท็บด้วย URL ให้ป้อน URL แล้วคลิกเปิด หน้าเว็บจะเปิดในแท็บใหม่บนอุปกรณ์ Android

   

   แท็บ Chrome ระยะไกลแต่ละแท็บจะมีส่วนของตัวเองใน chrome://inspect/#devices คุณสามารถโต้ตอบกับแท็บนั้นได้จากส่วนนี้ หากมีแอปที่ใช้ WebView คุณจะเห็นส่วนสำหรับแต่ละแอปเหล่านั้นด้วย ในตัวอย่างนี้ มีเพียงแท็บเดียวที่เปิดอยู่

4. คลิกตรวจสอบข้าง URL ที่คุณเพิ่งเปิด อินสแตนซ์ DevTools ใหม่จะเปิดขึ้น

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

การดำเนินการเพิ่มเติม: หยุดชั่วคราว โฟกัส โหลดซ้ำ หรือปิดแท็บ

คุณจะเห็นเมนูสำหรับหยุดชั่วคราว โฟกัส โหลดซ้ำ หรือปิดแท็บใต้ URL

ตรวจสอบองค์ประกอบ

ไปที่แผงองค์ประกอบของอินสแตนซ์ DevTools แล้ววางเมาส์เหนือองค์ประกอบเพื่อไฮไลต์ในวิวพอร์ตของอุปกรณ์ Android

นอกจากนี้ คุณยังแตะองค์ประกอบบนหน้าจออุปกรณ์ Android เพื่อเลือกองค์ประกอบนั้นในแผงองค์ประกอบได้ด้วย คลิกเลือกองค์ประกอบ ในอินสแตนซ์ DevTools แล้วแตะองค์ประกอบบนหน้าจออุปกรณ์ Android โปรดทราบว่าเลือกองค์ประกอบจะปิดอยู่หลังจากการแตะครั้งแรก คุณจึงต้องเปิดใช้อีกครั้งทุกครั้งที่ต้องการใช้ฟีเจอร์นี้

สตรีมหน้าจอ Android ไปยังเครื่องสำหรับพัฒนาซอฟต์แวร์

คลิกสลับการแคสต์หน้าจอ เพื่อดูเนื้อหาของอุปกรณ์ Android ในอินสแตนซ์ DevTools

คุณสามารถโต้ตอบกับสกรีนแคสต์ได้หลายวิธีดังนี้

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

หมายเหตุเกี่ยวกับสกรีนแคสต์มีดังนี้

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

แก้ไขข้อบกพร่องด้วยตนเองผ่าน Android Debug Bridge (adb)

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

คุณสามารถใช้ Android Debug Bridge (adb) เพื่อทำดังนี้

1. อย่าลืมเปิดใช้ตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์และการแก้ไขข้อบกพร่อง USB ในอุปกรณ์ Android
2. เปิด Chrome ในอุปกรณ์ Android

3. เชื่อมต่ออุปกรณ์ Android กับเครื่องสำหรับพัฒนาซอฟต์แวร์ผ่าน

   • สาย USB (ตรงไปตรงมา)
   • หรือการเชื่อมต่อ Wi-Fi ของ adb

4. ในบรรทัดคำสั่งของเครื่องสำหรับพัฒนา ให้เรียกใช้ adb devices -l แล้วตรวจสอบว่าอุปกรณ์ของคุณอยู่ในรายการหรือไม่

5. ส่งต่อซ็อกเก็ต CDP ในอุปกรณ์ไปยังพอร์ตในเครื่อง เช่น 9222 หากต้องการทำเช่นนี้ ให้เรียกใช้

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. เมื่อเชื่อมต่อสำเร็จแล้ว ให้ตรวจสอบสิ่งต่อไปนี้

   • http://localhost:9222/json แสดงเป้าหมาย page
   • http://localhost:9222/json/version แสดงปลายทางเป้าหมาย browser ตามที่เอกสารประกอบ CDP ระบุ
   • chrome://inspect/#devices จะปรากฏขึ้นแม้ว่าจะไม่ได้เลือกการตั้งค่าค้นหาอุปกรณ์ USB ไว้ก็ตาม

ดูวิธีแก้ปัญหาได้ที่

• เอกสารประกอบของ adb

• คุณอ่านคู่มือเก่าๆ เหล่านี้ได้หากต้องการ

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how