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