เข้าถึงเซิร์ฟเวอร์ภายในและอินสแตนซ์ของ 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. กลับไปที่อุปกรณ์ คุณจะเห็นเป้าหมายระยะไกลใหม่ คลิกinspectใต้แท็บที่ต้องการแก้ไขข้อบกพร่อง

      

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

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