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

Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova

您可以使用通訊埠轉送功能執行下列操作:

  • 案件 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. 在「目標探索設定」中輸入 localhost:PORT,勾選 核取方塊。「啟用通訊埠轉送」,然後按一下「完成」

      目標探索設定視窗。

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

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

  3. 系統會在「裝置模式」中開啟新的「開發人員工具」視窗。在頂端的網址列中輸入要偵錯的網站網址。

    在裝置模式下使用開發人員工具。

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

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

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

    清單中的 Android 裝置。

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

  3. 按一下核取方塊旁的「通訊埠轉送」

  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)。更新後 設定自訂網域對應和通訊埠轉送,即可在 網址為 chrome.devtools 的 Android 裝置。

設定將通訊埠轉送到 Proxy 伺服器

如要對應自訂網域,您必須在開發機器上執行 Proxy 伺服器。Proxy 範例 伺服器包括 CharlesSquidFiddler

如何設定將通訊埠轉送到 Proxy:

  1. 執行 Proxy 伺服器,並記下該伺服器正在使用的通訊埠。

  2. 為 Android 裝置設定通訊埠轉送。在 [local address] (當地地址) 欄位中輸入 localhost:,後面加上 Proxy 伺服器執行時所在的通訊埠。舉例來說 通訊埠為 8000,請輸入 localhost:8000。在「device port」欄位中 輸入要 Android 裝置聆聽的數字,例如 3333

在裝置上指定 Proxy 設定

接下來,您需要設定 Android 裝置與 Proxy 伺服器通訊。

  1. 在 Android 裝置上前往「設定」>Wi-Fi
  2. 長按目前連線的網路名稱。

  3. 輕觸「修改網路」

  4. 輕觸「進階選項」。Proxy 設定隨即顯示。

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

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

  7. 在「Proxy 通訊埠」欄位中,輸入您在「裝置通訊埠」中輸入的通訊埠號碼 請參閱上一節的說明。

  8. 輕觸 [儲存]

使用這些設定時,裝置會將所有要求轉送至開發上的 Proxy 這類機制更為快速Proxy 會代表您的裝置發出要求,因此向您的自訂本機發出要求 網域皆已正確解析。

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

如果您的網路伺服器執行非標準通訊埠的運作,請記得在 要求 Android 裝置提供內容。例如,如果您的網路伺服器 位於通訊埠 7331 的網域 chrome.devtools,當您透過 Android 裝置瀏覽網站時,則應 使用 chrome.devtools:7331 這個網址。