เข้าถึงเซิร์ฟเวอร์ภายในและอินสแตนซ์ของ 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. ตรวจสอบว่าได้เลือก ค้นหาเป้าหมายเครือข่าย แล้ว
   3. คลิกกำหนดค่า ข้างช่องทำเครื่องหมาย

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

      

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

      

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

   

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

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

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

   

2. ตรวจสอบว่าได้เลือก ค้นหาอุปกรณ์ 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 เช่น หากเว็บเซิร์ฟเวอร์ใช้โดเมนที่กำหนดเอง chrome.devtools ในพอร์ต 7331 เมื่อดูเว็บไซต์จากอุปกรณ์ Android คุณควร ใช้ URL chrome.devtools:7331