เข้าถึงเซิร์ฟเวอร์ภายในและอินสแตนซ์ของ Chrome ด้วยการส่งต่อพอร์ต

Kayce Basques

Meggin Kearney

Sofia Emelianova

คุณใช้การส่งต่อพอร์ตเพื่อดำเนินการต่อไปนี้ได้

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

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

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

ตั้งค่าการส่งต่อพอร์ต

ทำตามขั้นตอนถัดไปโดยขึ้นอยู่กับกรณีของคุณ

กรณีที่ 1: ตั้งค่าการส่งต่อพอร์ตไปยังอินสแตนซ์ Chrome อื่น

1. เรียกใช้อินสแตนซ์ 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
   

2. ในอินสแตนซ์ Chrome คุณกำลังแก้ไขข้อบกพร่องด้วยสิ่งต่อไปนี้

   1. เปิด chrome://inspect/#devices
   2. ตรวจสอบว่าได้เลือก เป้าหมายเครือข่าย Discover แล้ว
   3. คลิกกำหนดค่าข้างช่องทำเครื่องหมาย

   4. ใน Target discovery settings ให้ป้อน localhost:PORT แล้วเลือก เปิดใช้การส่งต่อพอร์ต แล้วคลิกเสร็จสิ้น

      

   5. กลับไปที่อุปกรณ์ คุณจะเห็นเป้าหมายระยะไกลใหม่ คลิกตรวจสอบใต้แท็บที่ต้องการแก้ไขข้อบกพร่อง

      

3. หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บในโหมดอุปกรณ์จะเปิดขึ้น ในแถบที่อยู่ด้านบน คุณจะป้อนที่อยู่ของเว็บไซต์ที่ต้องการแก้ไขข้อบกพร่องได้

   

4. คุณสามารถเปิด/ปิดวิธีการป้อนข้อมูลได้จากข้างแถบที่อยู่

เคส 2: ตั้งค่าการส่งต่อพอร์ตผ่าน USB สําหรับอุปกรณ์ Android

1. ตั้งค่าการแก้ไขข้อบกพร่องระยะไกลระหว่างเครื่องการพัฒนาและอุปกรณ์ Android เมื่อทำเสร็จแล้ว คุณจะเห็นอุปกรณ์ Android ของคุณในรายการ

   

2. ตรวจสอบว่าได้เลือก Discover USB แล้ว

3. คลิกการส่งต่อพอร์ตที่ติดกับช่องทำเครื่องหมาย

4. ในการตั้งค่าการส่งต่อพอร์ต ระบบจะตั้งค่า localhost:8080 ไว้โดยค่าเริ่มต้น เลือกเปิดใช้การส่งต่อพอร์ต

   

5. หากต้องการตั้งค่าพอร์ตอื่นๆ โปรดทำตามขั้นตอนถัดไป ไม่เช่นนั้น ให้ข้ามขั้นตอนและคลิกเสร็จสิ้น

6. ในช่องข้อความพอร์ตทางด้านซ้าย ให้ป้อนหมายเลขพอร์ตที่คุณต้องการ สามารถเข้าถึงเว็บไซต์นี้บนอุปกรณ์ Android ของคุณ เช่น หากต้องการเข้าถึงเว็บไซต์ จาก localhost:5000 คุณจะต้องป้อน 5000

7. ในช่องข้อความที่อยู่ IP และพอร์ตทางด้านขวา ให้ป้อนที่อยู่ IP หรือชื่อโฮสต์ เว็บไซต์ของคุณทำงานอยู่ในเว็บเซิร์ฟเวอร์ของเครื่องพัฒนาระบบ ตามด้วยหมายเลขพอร์ต สำหรับ ตัวอย่างเช่น หากเว็บไซต์ใช้ localhost:5000 คุณจะต้องป้อน localhost:5000

8. คลิกเสร็จสิ้น

ตั้งค่าการส่งต่อพอร์ตแล้ว คุณจะเห็นสัญญาณบอกสถานะพอร์ตไปข้างหน้าที่ด้านบนเช่นกัน นอกเหนือจากชื่ออุปกรณ์

หากต้องการดูเนื้อหา ให้เปิด 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

วิธีตั้งค่าการส่งต่อพอร์ตไปยังพร็อกซี

1. เรียกใช้พร็อกซีเซิร์ฟเวอร์และจดบันทึกพอร์ตที่พร็อกซีใช้อยู่

2. ตั้งค่าการส่งต่อพอร์ตไปยังอุปกรณ์ Android สำหรับช่องที่อยู่ในท้องถิ่น ให้ป้อน localhost: ตามด้วยพอร์ตที่พร็อกซีเซิร์ฟเวอร์ทำงานอยู่ ตัวอย่างเช่น หากเป็น กำลังทำงานบนพอร์ต 8000 คุณจะต้องป้อน localhost:8000 ในช่องพอร์ตอุปกรณ์ ป้อนหมายเลขที่ต้องการให้อุปกรณ์ Android ฟัง เช่น 3333

กำหนดการตั้งค่าพร็อกซีในอุปกรณ์

ขั้นตอนต่อไป คุณต้องกำหนดค่าอุปกรณ์ Android ให้สื่อสารกับพร็อกซีเซิร์ฟเวอร์

1. ในอุปกรณ์ Android ให้ไปที่การตั้งค่า > Wi-Fi

2. กดชื่อเครือข่ายที่คุณเชื่อมต่ออยู่ค้างไว้

3. แตะแก้ไขเครือข่าย

4. แตะตัวเลือกขั้นสูง การตั้งค่าพร็อกซีจะปรากฏขึ้น

5. แตะเมนูพร็อกซี แล้วเลือกกำหนดเอง

6. สำหรับช่องชื่อโฮสต์ของพร็อกซี ให้ป้อน localhost

7. สำหรับช่องพอร์ตพร็อกซี ให้ป้อนหมายเลขพอร์ตที่คุณป้อนสำหรับพอร์ตอุปกรณ์ใน ส่วนก่อนหน้า

8. แตะบันทึก

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

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

หากเว็บเซิร์ฟเวอร์ของคุณกำลังจะออกจากพอร์ตที่ไม่เป็นมาตรฐาน โปรดอย่าลืมระบุพอร์ตเมื่อ กำลังขอเนื้อหาจากอุปกรณ์ Android ของคุณ ตัวอย่างเช่น ถ้าเว็บเซิร์ฟเวอร์ของคุณใช้แอตทริบิวต์ที่กำหนดเอง chrome.devtools บนพอร์ต 7331 เมื่อคุณดูเว็บไซต์จากอุปกรณ์ Android คุณควร ใช้ URL chrome.devtools:7331