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

Meggin Kearney
Meggin Kearney
Sofia Emelianova
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ữ một trang web trên máy chủ web của máy phát triển, sau đó truy cập vào 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 ánh xạ tới cổng TCP trên máy phát triển của bạn. Lưu lượng truy cập giữa các cổng này thông qua kết nối USB giữa thiết bị Android và máy phát triển, nên kết nối không phụ thuộc vào cấu hình mạng.

Ngoài ra, nếu máy chủ web của bạn đang sử dụng một miền tuỳ chỉnh, thì 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 phiên bản Chrome khác có 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, bạn đang gỡ lỗi bằng:

    1. Mở chrome://inspect/#devices.
    2. Hãy đảm bảo bạn đã đánh dấu chọn Hộp đánh dấu. Khám phá các mục tiêu mạng.
    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, chọn Hộp đánh dấu. Bật chuyển tiếp cổng và nhấp vào Xong.

      Cửa sổ chế độ cài đặt khám phá mục tiêu.

    5. Quay lại phần Thiết bị, bạn sẽ thấy một đích từ xa mới. Nhấp vào inspect bên cạnh thẻ mà bạn muốn gỡ lỗi.

      Đường liên kết kiểm tra bên cạnh thẻ trên đích từ xa.

  3. Một cửa sổ Công cụ cho nhà phát triển 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ỉ trang web mà mình muốn gỡ lỗi.

    Công cụ cho nhà phát triển ở chế độ thiết bị.

  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 của bạn. Khi hoàn tất, bạn sẽ thấy thiết bị Android của mình trong danh sách.

    Thiết bị Android trong danh sách.

  2. Hãy nhớ đánh dấu mục Hộp đánh dấu. 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. Chọn Bật chuyển tiếp cổng.

    Chế độ cài đặt 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 Cổng ở bên trái, hãy nhập số cổng mà từ đó bạn muốn có thể truy cập trang web trên thiết bị Android của mình. Ví dụ: nếu muốn truy cập trang web này 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.

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 cổng phía trước ở trên cùng cũng như bên cạnh tên thiết bị.

Trạng thái chuyển tiếp cổng.

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

Liên kết đến miền địa phương tùy chỉnh

Á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 thư viện JavaScript của bên thứ ba chỉ hoạt động trên miền có trong danh sách cho phép chrome.devtools. Vì vậy, bạn tạo một mục trong tệp hosts trên máy phát triển để ánh xạ 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 chuyển tiếp cổng và ánh xạ miền tuỳ chỉnh, bạn có thể xem trang web này trên thiết bị Android tại URL chrome.devtools.

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

Để ánh xạ một miền tuỳ chỉnh, bạn phải chạy máy chủ proxy trên máy phát triển của mình. Một số ví dụ về máy chủ proxy là Charles, Squidđây.

Để thiết lập chế độ chuyển tiếp cổng tới proxy, hãy làm như sau:

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

  2. Thiết lập tính năng chuyển tiếp cổng tới 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 lệnh đ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 của mình nghe, chẳng hạn như 3333.

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

Tiếp theo, bạn cần định cấu hình thiết bị Android của mình để 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 đã 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. Cài đặt proxy sẽ hiển thị.

  5. Nhấn vào trình đơn Proxy rồi chọn 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ị ở phần trước.

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

Với các chế độ cài đặt này, thiết bị sẽ chuyển tiếp tất cả các yêu cầu của mình đến proxy trên máy phát triển. Proxy đưa ra yêu cầu thay cho thiết bị của bạn để các yêu cầu đối với miền cục bộ tuỳ chỉnh được giải quyết đú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 tiêu 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 tuỳ chỉnh chrome.devtools trên cổng 7331, thì khi xem trang web này từ thiết bị Android, bạn nên sử dụng URL chrome.devtools:7331.