คุณใช้การส่งต่อพอร์ตเพื่อดำเนินการต่อไปนี้ได้
- กรณีที่ 1 แก้ไขข้อบกพร่องของแท็บที่เปิดในอินสแตนซ์ Chrome อื่น
- กรณีที่ 2 โฮสต์เว็บไซต์ในเว็บเซิร์ฟเวอร์ของเครื่องการพัฒนา จากนั้นเข้าถึงเนื้อหาจากอุปกรณ์ Android ผ่านสาย USB
ในกรณีที่ 2 การส่งต่อพอร์ตจะทำงานผ่านพอร์ต TCP ที่กำลังฟังอยู่บนอุปกรณ์ Android ซึ่งแมปกับพอร์ต TCP ในเครื่องการพัฒนา การรับส่งข้อมูลระหว่างพอร์ตจะเดินทางผ่านการเชื่อมต่อ USB ระหว่างอุปกรณ์ Android และเครื่องพัฒนาซอฟต์แวร์ ดังนั้นการเชื่อมต่อจะไม่ขึ้นอยู่กับการกำหนดค่าเครือข่ายของคุณ
นอกจากนี้ ถ้าเว็บเซิร์ฟเวอร์ของคุณกำลังใช้โดเมนที่กำหนดเอง คุณก็สามารถตั้งค่าอุปกรณ์ Android เพื่อเข้าถึงเนื้อหาในโดเมนนั้นด้วยการแมปโดเมนที่กำหนดเอง
ตั้งค่าการส่งต่อพอร์ต
ทำตามขั้นตอนถัดไปโดยขึ้นอยู่กับกรณีของคุณ
กรณีที่ 1: ตั้งค่าการส่งต่อพอร์ตไปยังอินสแตนซ์ Chrome อื่น
เรียกใช้อินสแตนซ์ Chrome อื่นที่มีพารามิเตอร์
--remote-debugging-port=PORT
เช่นMacOS
open -a "Google Chrome" --args --remote-debugging-port=PORT
Windows
start chrome --remote-debugging-port=PORT
Linux
google-chrome --remote-debugging-port=PORT
ในอินสแตนซ์ Chrome คุณกำลังแก้ไขข้อบกพร่องด้วยสิ่งต่อไปนี้
- เปิด
chrome://inspect/#devices
- ตรวจสอบว่าได้เลือก
เป้าหมายเครือข่าย Discover แล้ว
- คลิกกำหนดค่าข้างช่องทำเครื่องหมาย
ใน Target discovery settings ให้ป้อน
localhost:PORT
แล้วเลือกเปิดใช้การส่งต่อพอร์ต แล้วคลิกเสร็จสิ้น
กลับไปที่อุปกรณ์ คุณจะเห็นเป้าหมายระยะไกลใหม่ คลิกตรวจสอบใต้แท็บที่ต้องการแก้ไขข้อบกพร่อง
- เปิด
หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บในโหมดอุปกรณ์จะเปิดขึ้น ในแถบที่อยู่ด้านบน คุณจะป้อนที่อยู่ของเว็บไซต์ที่ต้องการแก้ไขข้อบกพร่องได้
คุณสามารถเปิด/ปิดวิธีการป้อนข้อมูลได้จากข้างแถบที่อยู่
เคส 2: ตั้งค่าการส่งต่อพอร์ตผ่าน USB สําหรับอุปกรณ์ Android
ตั้งค่าการแก้ไขข้อบกพร่องระยะไกลระหว่างเครื่องการพัฒนาและอุปกรณ์ Android เมื่อทำเสร็จแล้ว คุณจะเห็นอุปกรณ์ Android ของคุณในรายการ
ตรวจสอบว่าได้เลือก
Discover USB แล้ว
คลิกการส่งต่อพอร์ตที่ติดกับช่องทำเครื่องหมาย
ในการตั้งค่าการส่งต่อพอร์ต ระบบจะตั้งค่า
localhost:8080
ไว้โดยค่าเริ่มต้น เลือกเปิดใช้การส่งต่อพอร์ตหากต้องการตั้งค่าพอร์ตอื่นๆ โปรดทำตามขั้นตอนถัดไป ไม่เช่นนั้น ให้ข้ามขั้นตอนและคลิกเสร็จสิ้น
ในช่องข้อความพอร์ตทางด้านซ้าย ให้ป้อนหมายเลขพอร์ตที่คุณต้องการ สามารถเข้าถึงเว็บไซต์นี้บนอุปกรณ์ Android ของคุณ เช่น หากต้องการเข้าถึงเว็บไซต์ จาก
localhost:5000
คุณจะต้องป้อน5000
ในช่องข้อความที่อยู่ IP และพอร์ตทางด้านขวา ให้ป้อนที่อยู่ IP หรือชื่อโฮสต์ เว็บไซต์ของคุณทำงานอยู่ในเว็บเซิร์ฟเวอร์ของเครื่องพัฒนาระบบ ตามด้วยหมายเลขพอร์ต สำหรับ ตัวอย่างเช่น หากเว็บไซต์ใช้
localhost:5000
คุณจะต้องป้อนlocalhost:5000
คลิกเสร็จสิ้น
ตั้งค่าการส่งต่อพอร์ตแล้ว คุณจะเห็นสัญญาณบอกสถานะพอร์ตไปข้างหน้าที่ด้านบนเช่นกัน นอกเหนือจากชื่ออุปกรณ์
หากต้องการดูเนื้อหา ให้เปิด Chrome ในอุปกรณ์ Android และไปที่พอร์ต localhost
ที่คุณ
ที่ระบุไว้ในช่องพอร์ตของอุปกรณ์ ตัวอย่างเช่น หากคุณป้อน 5000
ลงในช่อง คุณจะต้อง
จะไปที่ localhost:5000
แมปกับโดเมนท้องถิ่นที่กำหนดเอง
การแมปโดเมนที่กำหนดเองจะช่วยให้คุณดูเนื้อหาในอุปกรณ์ Android จากเว็บเซิร์ฟเวอร์ใน เครื่องที่กำลังพัฒนาที่ใช้โดเมนที่กำหนดเอง
ตัวอย่างเช่น สมมติว่าเว็บไซต์ของคุณใช้ไลบรารี JavaScript ของบุคคลที่สามซึ่งทำงานเฉพาะใน
โดเมน chrome.devtools
ในรายการที่อนุญาต ดังนั้น คุณจึงสร้างรายการในไฟล์ hosts
บน
เพื่อแมปโดเมนนี้กับ localhost
(เช่น 127.0.0.1 chrome.devtools
) หลัง
เมื่อตั้งค่าการแมปโดเมนที่กำหนดเอง และการส่งต่อพอร์ต คุณจะสามารถดูไซต์บน
อุปกรณ์ Android ที่ URL chrome.devtools
ตั้งค่าการส่งต่อพอร์ตไปยังพร็อกซีเซิร์ฟเวอร์
หากต้องการจับคู่โดเมนที่กำหนดเอง คุณต้องเรียกใช้พร็อกซีเซิร์ฟเวอร์ในเครื่องการพัฒนา ตัวอย่างของพร็อกซี เซิร์ฟเวอร์คือ Charles, Squid และ Fiddler
วิธีตั้งค่าการส่งต่อพอร์ตไปยังพร็อกซี
เรียกใช้พร็อกซีเซิร์ฟเวอร์และจดบันทึกพอร์ตที่พร็อกซีใช้อยู่
ตั้งค่าการส่งต่อพอร์ตไปยังอุปกรณ์ Android สำหรับช่องที่อยู่ในท้องถิ่น ให้ป้อน
localhost:
ตามด้วยพอร์ตที่พร็อกซีเซิร์ฟเวอร์ทำงานอยู่ ตัวอย่างเช่น หากเป็น กำลังทำงานบนพอร์ต8000
คุณจะต้องป้อนlocalhost:8000
ในช่องพอร์ตอุปกรณ์ ป้อนหมายเลขที่ต้องการให้อุปกรณ์ Android ฟัง เช่น3333
กำหนดการตั้งค่าพร็อกซีในอุปกรณ์
ขั้นตอนต่อไป คุณต้องกำหนดค่าอุปกรณ์ Android ให้สื่อสารกับพร็อกซีเซิร์ฟเวอร์
- ในอุปกรณ์ Android ให้ไปที่การตั้งค่า > Wi-Fi
กดชื่อเครือข่ายที่คุณเชื่อมต่ออยู่ค้างไว้
แตะแก้ไขเครือข่าย
แตะตัวเลือกขั้นสูง การตั้งค่าพร็อกซีจะปรากฏขึ้น
แตะเมนูพร็อกซี แล้วเลือกกำหนดเอง
สำหรับช่องชื่อโฮสต์ของพร็อกซี ให้ป้อน
localhost
สำหรับช่องพอร์ตพร็อกซี ให้ป้อนหมายเลขพอร์ตที่คุณป้อนสำหรับพอร์ตอุปกรณ์ใน ส่วนก่อนหน้า
แตะบันทึก
เมื่อใช้การตั้งค่าเหล่านี้ อุปกรณ์จะส่งต่อคำขอทั้งหมดของอุปกรณ์ไปยังพร็อกซีในการพัฒนา อุปกรณ์ พร็อกซีจะส่งคำขอในนามของอุปกรณ์ และส่งคำขอไปยัง โดเมนได้รับการแก้ไขอย่างถูกต้อง
ตอนนี้คุณสามารถเข้าถึงโดเมนที่กำหนดเองบน Android บนอุปกรณ์ Android ได้เช่นเดียวกับที่ทำใน เครื่องสำหรับพัฒนาซอฟต์แวร์
หากเว็บเซิร์ฟเวอร์ของคุณกำลังจะออกจากพอร์ตที่ไม่เป็นมาตรฐาน โปรดอย่าลืมระบุพอร์ตเมื่อ
กำลังขอเนื้อหาจากอุปกรณ์ Android ของคุณ ตัวอย่างเช่น ถ้าเว็บเซิร์ฟเวอร์ของคุณใช้แอตทริบิวต์ที่กำหนดเอง
chrome.devtools
บนพอร์ต 7331
เมื่อคุณดูเว็บไซต์จากอุปกรณ์ Android คุณควร
ใช้ URL chrome.devtools:7331