透過通訊埠轉送功能存取本機伺服器和 Chrome 執行個體

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

您可以使用連接埠轉送功能執行下列操作：

  • 案例 1：在其他 Chrome 例項中開啟的分頁進行偵錯。
  • 案例 2：在開發機器的網路伺服器上代管網站，然後透過 USB 傳輸線存取 Android 裝置上的內容。

在案例 2中，通訊埠轉送功能會透過 Android 裝置上的監聽 TCP 通訊埠運作，該通訊埠會對應至開發機器上的 TCP 通訊埠。端口之間的流量會透過 Android 裝置和開發機器之間的 USB 連線傳輸，因此這項連線不受網路設定影響。

此外，如果網路伺服器使用自訂網域，您可以設定 Android 裝置，透過自訂網域對應存取該網域的內容。

設定通訊埠轉送

請根據您的情況，按照下列步驟操作。

案例 1：設定通訊埠轉送至其他 Chrome 例項

  1. 使用 --remote-debugging-port=PORT 參數執行另一個 Chrome 例項，例如：

    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. 在「Target discovery settings」(目標探索設定) 中輸入 localhost:PORT，勾選 核取方塊。「Enable port forwarding」(啟用通訊埠轉送)，然後按一下「Done」(完成)。

      目標探索設定視窗。

    5. 回到「裝置」頁面，您會看到新的遠端目標。按一下要偵錯的分頁旁的「檢查」。

      遠端目標分頁旁的檢查連結。

  3. 裝置模式中的新開發人員工具視窗隨即開啟。在頂端的網址列中，輸入要偵錯的網站網址。

    處於裝置模式的開發人員工具。

  4. 你可以在網址列旁邊切換輸入法。

案例 2：透過 USB 為 Android 裝置設定通訊埠轉送

  1. 在開發機器和 Android 裝置之間設定遠端偵錯功能。完成後，清單中應該會顯示您的 Android 裝置。

    清單中的 Android 裝置。

  2. 確認已勾選「尋找 USB 裝置」核取方塊。。

  3. 按一下核取方塊旁的「Port forwarding」。

  4. 在通訊埠轉送設定中，預設會設定 localhost:8080。勾選「啟用通訊埠轉送」。

    通訊埠轉送設定。。

  5. 如要設定其他連接埠，請按照下列步驟操作。否則請略過這些步驟，然後按一下「完成」。

  6. 在左側的「Port」文字欄位中，輸入您要在 Android 裝置上存取網站的通訊埠號碼。舉例來說，如果您想從 localhost:5000 存取網站，請輸入 5000。

  7. 在右側的「IP 位址和通訊埠」文字欄位中，輸入開發機器的網路伺服器上網站執行的 IP 位址或主機名稱，後面加上通訊埠號碼。舉例來說，如果您的網站在 localhost:5000 上執行，請輸入 localhost:5000。

  8. 按一下 [完成]。

通訊埠轉送現已設定完成。您可以在頂端和裝置名稱旁看到轉送連接埠的狀態指標。

通訊埠轉送狀態。

如要查看內容，請在 Android 裝置上開啟 Chrome，然後前往您在「裝置連接埠」欄位中指定的 localhost 連接埠。舉例來說，如果您在欄位中輸入 5000，則會轉到 localhost:5000。

對應至自訂本機網域

自訂網域對應功能可讓您透過開發機器上的網路伺服器 (使用自訂網域)，在 Android 裝置上查看內容。

舉例來說，假設您的網站使用第三方 JavaScript 程式庫，但該程式庫只適用於許可清單中的網域 chrome.devtools。因此，您可以在開發機器的 hosts 檔案中建立項目，將這個網域對應至 localhost (即 127.0.0.1 chrome.devtools)。設定自訂網域對應和通訊埠轉送後，您就能在 Android 裝置上透過網址 chrome.devtools 查看該網站。

設定通訊埠轉送至 Proxy 伺服器

如要對應自訂網域，您必須在開發機器上執行 Proxy 伺服器。代理伺服器的例子包括 Charles、Squid 和 Fiddler。

如要設定通訊埠轉送至 Proxy，請按照下列步驟操作：

  1. 執行 Proxy 伺服器，並記下所使用的通訊埠。

  2. 為 Android 裝置設定通訊埠轉送。在「本機位址」欄位中，輸入 localhost:，後面接上 Proxy 伺服器執行的通訊埠。舉例來說，如果服務在 8000 通訊埠上執行，您就會輸入 localhost:8000。在「裝置通訊埠」欄位中，輸入您希望 Android 裝置監聽的號碼，例如 3333。

在裝置上設定 Proxy

接下來，您需要設定 Android 裝置，讓裝置與 Proxy 伺服器進行通訊。

  1. 在 Android 裝置上依序前往「設定」 >「Wi-Fi」。

  2. 長按已連線的網路名稱。

  3. 輕觸「修改網路」。

  4. 輕觸「進階選項」。系統會顯示 Proxy 設定。

  5. 輕觸「Proxy」選單，然後選取「手動」。

  6. 在「Proxy hostname」欄位中輸入 localhost。

  7. 在「Proxy port」欄位中，輸入您在前一個部分中為「device port」輸入的通訊埠編號。

  8. 輕觸 [儲存]。

有了這些設定，裝置就會將所有要求轉送至開發機器上的 Proxy。代理程式會代表裝置提出要求，因此系統可以正確解析對自訂本機網域的要求。

您現在可以在 Android 裝置上存取自訂網域，就像在開發機器上一樣。

如果您的網頁伺服器是透過非標準連接埠運作，請記得在從 Android 裝置要求內容時指定連接埠。舉例來說，如果您的網路伺服器在 7331 通訊埠上使用自訂網域 chrome.devtools，那麼當您透過 Android 裝置查看網站時，應使用網址 chrome.devtools:7331。