Truy cập vào máy chủ cục bộ và phiên bản Chrome bằng tính năng chuyển tiếp cổng

Kayce Basques

Meggin Kearney

Sofia Emelianova

Bạn có thể sử dụng tính năng chuyển tiếp cổng để:

• Trường hợp 1. Gỡ lỗi một thẻ được mở trên một phiên bản Chrome khác.
• Trường hợp 2. Lưu trữ trang web trên máy chủ web của máy phát triển, sau đó truy cập nội dung từ thiết bị Android thông qua cáp USB.

Trong Trường hợp 2, tính năng chuyển tiếp cổng hoạt động thông qua một cổng TCP đang nghe trên thiết bị Android liên kết với một cổng TCP trên máy phát triển. Lưu lượng truy cập giữa các cổng di chuyển qua kết nối USB giữa thiết bị Android và máy phát triển, vì vậy, kết nối không phụ thuộc vào cấu hình mạng của bạn.

Ngoài ra, nếu máy chủ web của bạn đang sử dụng một miền tuỳ chỉnh, bạn có thể thiết lập thiết bị Android để truy cập vào nội dung tại miền đó bằng tính năng ánh xạ miền tuỳ chỉnh.

Thiết lập chuyển tiếp cổng

Tuỳ thuộc vào trường hợp của bạn, hãy làm theo các bước tiếp theo.

Trường hợp 1: Thiết lập tính năng chuyển tiếp cổng đến một phiên bản Chrome khác

1. Chạy một thực thể Chrome khác bằng tham số --remote-debugging-port=PORT, ví dụ:

   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. Trong phiên bản Chrome mà bạn đang gỡ lỗi:

   1. Mở chrome://inspect/#devices.
   2. Đảm bảo bạn đã đánh dấu vào Mục tiêu mạng Khám phá.
   3. Nhấp vào Định cấu hình bên cạnh hộp đánh dấu.

   4. Trong phần Cài đặt khám phá mục tiêu, hãy nhập localhost:PORT, đánh dấu vào Bật tính năng chuyển tiếp cổng rồi nhấp vào Xong.

      

   5. Quay lại phần Thiết bị, bạn sẽ thấy một mục tiêu từ xa mới. Nhấp vào kiểm tra bên cạnh thẻ bạn muốn gỡ lỗi.

      

3. Cửa sổ DevTools mới ở chế độ thiết bị sẽ mở ra. Trong thanh địa chỉ ở trên cùng, bạn có thể nhập địa chỉ của trang web mà bạn muốn gỡ lỗi.

   

4. Bên cạnh thanh địa chỉ, bạn có thể bật/tắt các phương thức nhập.

Trường hợp 2: Thiết lập tính năng chuyển tiếp cổng qua USB cho thiết bị Android

1. Thiết lập tính năng gỡ lỗi từ xa giữa máy phát triển và thiết bị Android. Khi hoàn tất, bạn sẽ thấy thiết bị Android của mình trong danh sách.

   

2. Đảm bảo bạn đã đánh dấu vào Discover USB devices (Khám phá thiết bị USB).

3. Nhấp vào Chuyển tiếp cổng bên cạnh hộp đánh dấu.

4. Trong phần Cài đặt chuyển tiếp cổng, localhost:8080 được thiết lập theo mặc định. Đánh dấu vào Bật tính năng chuyển tiếp cổng.

   .

5. Nếu bạn muốn thiết lập các cổng khác, hãy làm theo các bước tiếp theo. Nếu không, hãy bỏ qua các bước này và nhấp vào Xong.

6. Trong trường văn bản Port (Cổng) ở bên trái, hãy nhập số cổng mà bạn muốn truy cập vào trang web trên thiết bị Android. Ví dụ: nếu muốn truy cập vào trang web từ localhost:5000, bạn sẽ nhập 5000.

7. Trong trường văn bản Địa chỉ IP và cổng ở bên phải, hãy nhập địa chỉ IP hoặc tên máy chủ mà trang web của bạn đang chạy trên máy chủ web của máy phát triển, theo sau là số cổng. Ví dụ: nếu trang web của bạn đang chạy trên localhost:5000, bạn sẽ nhập localhost:5000.

8. Nhấp vào Xong.

Tính năng chuyển tiếp cổng hiện đã được thiết lập. Bạn có thể thấy chỉ báo trạng thái của tính năng chuyển tiếp cổng ở trên cùng cũng như bên cạnh tên thiết bị.

Để xem nội dung, hãy mở Chrome trên thiết bị Android và chuyển đến cổng localhost mà bạn đã chỉ định trong trường Cổng thiết bị. Ví dụ: nếu nhập 5000 vào trường, bạn sẽ chuyển đến localhost:5000.

Ánh xạ đến miền tuỳ chỉnh cục bộ

Tính năng ánh xạ miền tuỳ chỉnh cho phép bạn xem nội dung trên thiết bị Android từ máy chủ web trên máy phát triển đang sử dụng miền tuỳ chỉnh.

Ví dụ: giả sử trang web của bạn sử dụng một thư viện JavaScript của bên thứ ba chỉ hoạt động trên miền chrome.devtools có trong danh sách cho phép. Vì vậy, bạn tạo một mục nhập trong tệp hosts trên máy phát triển để liên kết miền này với localhost (tức là 127.0.0.1 chrome.devtools). Sau khi thiết lập tính năng liên kết miền tuỳ chỉnh và chuyển tiếp cổng, bạn sẽ có thể xem trang web trên thiết bị Android của mình tại URL chrome.devtools.

Thiết lập tính năng chuyển tiếp cổng đến máy chủ proxy

Để liên kết một miền tuỳ chỉnh, bạn phải chạy một máy chủ proxy trên máy phát triển. Ví dụ về máy chủ proxy là Charles, Squid và Fiddler.

Cách thiết lập tính năng chuyển tiếp cổng đến một proxy:

1. Chạy máy chủ proxy và ghi lại cổng mà máy chủ đó đang sử dụng.

2. Thiết lập tính năng chuyển tiếp cổng đến thiết bị Android. Đối với trường địa chỉ cục bộ, hãy nhập localhost:, theo sau là cổng mà máy chủ proxy của bạn đang chạy. Ví dụ: nếu ứng dụng đang chạy trên cổng 8000, thì bạn sẽ nhập localhost:8000. Trong trường cổng thiết bị, hãy nhập số mà bạn muốn thiết bị Android nghe, chẳng hạn như 3333.

Định cấu hình chế độ cài đặt proxy trên thiết bị

Tiếp theo, bạn cần định cấu hình thiết bị Android để giao tiếp với máy chủ proxy.

1. Trên thiết bị Android, hãy chuyển đến phần Cài đặt > Wi-Fi.

2. Nhấn và giữ tên của mạng mà bạn đang kết nối.

3. Nhấn vào Sửa đổi mạng.

4. Nhấn vào Lựa chọn nâng cao. Chế độ cài đặt proxy sẽ hiển thị.

5. Nhấn vào trình đơn Proxy (Proxy) rồi chọn Manual (Thủ công).

6. Đối với trường Tên máy chủ proxy, hãy nhập localhost.

7. Đối với trường Cổng proxy, hãy nhập số cổng mà bạn đã nhập cho cổng thiết bị trong phần trước.

8. Nhấn vào Lưu.

Với các chế độ cài đặt này, thiết bị của bạn sẽ chuyển tiếp tất cả các yêu cầu đến proxy trên máy phát triển. Proxy thay mặt thiết bị của bạn thực hiện các yêu cầu, vì vậy, các yêu cầu đến miền cục bộ tuỳ chỉnh của bạn sẽ được phân giải đúng cách.

Giờ đây, bạn có thể truy cập vào các miền tuỳ chỉnh trên thiết bị Android của mình giống như trên máy phát triển.

Nếu máy chủ web của bạn đang chạy trên một cổng không chuẩn, hãy nhớ chỉ định cổng đó khi yêu cầu nội dung từ thiết bị Android. Ví dụ: nếu máy chủ web của bạn đang sử dụng miền tùy chỉnh chrome.devtools trên cổng 7331, thì khi xem trang web từ thiết bị Android, bạn sẽ sử dụng URL chrome.devtools:7331.