คุณสามารถใช้การส่งต่อพอร์ตเพื่อดำเนินการต่อไปนี้
- กรณีที่ 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
- ตรวจสอบว่าได้เลือก สำรวจเป้าหมายเครือข่ายไว้
- คลิกกำหนดค่าข้างช่องทำเครื่องหมาย
ในการตั้งค่าการค้นพบเป้าหมาย ให้ป้อน
localhost:PORT
แล้วเลือก เปิดใช้การส่งต่อพอร์ต และคลิกเสร็จสิ้นในส่วนอุปกรณ์ คุณจะเห็นเป้าหมายระยะไกลใหม่ คลิกinspectข้างแท็บที่ต้องการแก้ไขข้อบกพร่อง
- เปิด
หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บใหม่ในโหมดอุปกรณ์จะเปิดขึ้น ในแถบที่อยู่ด้านบน คุณสามารถป้อนที่อยู่ของเว็บไซต์ที่ต้องการแก้ไขข้อบกพร่อง
ถัดจากแถบที่อยู่ คุณสามารถสลับวิธีการป้อนข้อมูลได้
เคส 2: ตั้งค่าการส่งต่อพอร์ตผ่าน USB สำหรับอุปกรณ์ Android
ตั้งค่าการแก้ไขข้อบกพร่องระยะไกลระหว่างเครื่องพัฒนาซอฟต์แวร์กับอุปกรณ์ Android เมื่อดำเนินการเสร็จแล้ว คุณควรเห็นอุปกรณ์ Android ของคุณในรายการ
ตรวจสอบว่าได้เลือกสำรวจอุปกรณ์ 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 ตัวอย่างเช่น หากเว็บเซิร์ฟเวอร์ใช้ chrome.devtools
โดเมนที่กำหนดเองบนพอร์ต 7331
อยู่ เมื่อดูเว็บไซต์จากอุปกรณ์ Android คุณควรใช้ URL chrome.devtools:7331