您可以使用通訊埠轉送功能執行以下操作:
- 案件 1。對在其他 Chrome 執行個體中開啟的分頁進行偵錯。
- 案件 2。接著,透過開發機器網路伺服器代管網站,然後透過 USB 傳輸線從 Android 裝置存取內容。
在 Case 2 中,通訊埠轉送會透過 Android 裝置上的監聽 TCP 通訊埠運作,該通訊埠會對應至開發機器上的 TCP 通訊埠。通訊埠之間的流量會在 Android 裝置和開發機器之間透過 USB 連線傳輸,因此連線不需取決於您的網路設定。
此外,如果您的網路伺服器是使用自訂網域,您可以設定 Android 裝置,透過自訂網域對應功能存取該網域的內容。
設定通訊埠轉送
視你的情況而定,按照後續步驟操作。
案例 1:設定傳送至其他 Chrome 執行個體的通訊埠轉送功能
使用
--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
在您要偵錯的 Chrome 執行個體上:
- 開啟
chrome://inspect/#devices
。 - 確認已勾選「探索聯播網目標」。
- 按一下核取方塊旁的「設定」。
在「目標探索設定」中輸入
localhost:PORT
,勾選「啟用通訊埠轉送」,然後按一下「完成」。返回「裝置」部分時,您會看到新的遠端目標。找出要偵錯的分頁,然後按一下旁邊的「檢查」inspect。
- 開啟
在裝置模式中,系統會開啟新的開發人員工具視窗。在頂端的網址列中,輸入想要偵錯的網站網址。
你可在網址列旁切換輸入法。
案例 2:透過 USB 為 Android 裝置設定通訊埠轉送功能
在開發機器和 Android 裝置之間設定遠端偵錯。完成後,清單中會顯示您的 Android 裝置。
確認 「探索 USB 裝置」已勾選。
按一下核取方塊旁的「通訊埠轉送」。
在「通訊埠轉送設定」中,系統預設為
localhost:8080
。勾選「啟用通訊埠轉送」。.
如要設定其他通訊埠,請按照下方的步驟操作。否則請略過步驟,並按一下「完成」。
在左側的「Port」(通訊埠) 文字欄位中,輸入您想在 Android 裝置上存取網站的通訊埠號碼。舉例來說,如要從
localhost:5000
存取網站,請輸入5000
。在右側的「IP address and port」(IP 位址和通訊埠) 文字欄位中,輸入網站在開發機器的網路伺服器上執行的 IP 位址或主機名稱,後面加上通訊埠編號。舉例來說,如果您的網站在
localhost:5000
上執行,請輸入localhost:5000
。按一下「完成」。
通訊埠轉送功能現已設定完成。畫面頂端以及裝置名稱旁邊,會顯示通訊埠向前的狀態指標。
如要查看內容,請在 Android 裝置上開啟 Chrome,然後前往您在「裝置通訊埠」欄位指定的 localhost
通訊埠。例如,如果您在欄位中輸入 5000
,則會前往 localhost:5000
。
對應至自訂當地網域
自訂網域對應可讓您在開發機器 (使用自訂網域) 上查看來自網路伺服器的內容。
舉例來說,假設您的網站使用的第三方 JavaScript 程式庫僅適用於許可清單中的網域 chrome.devtools
。因此,您可以在開發機器的 hosts
檔案中建立項目,以便將這個網域對應至 localhost
(例如 127.0.0.1 chrome.devtools
)。設定自訂網域對應和通訊埠轉送後,即可在 Android 裝置上透過網址 chrome.devtools
查看該網站。
設定傳送至 Proxy 伺服器的通訊埠轉送功能
如要對應自訂網域,您必須在開發機器上執行 Proxy 伺服器。Proxy 伺服器的範例包括 Charles、Squid 和 Fiddler。
如何設定 Proxy 的通訊埠轉送功能:
執行 Proxy 伺服器,並記下其使用的通訊埠。
設定 Android 裝置的通訊埠轉送功能。在「local address」(本機位址) 欄位中,輸入
localhost:
,後面加上執行 Proxy 伺服器的通訊埠。舉例來說,如果是在通訊埠8000
上執行,請輸入localhost:8000
。在「device port」(裝置通訊埠) 欄位中,輸入您希望 Android 裝置監聽的數字,例如3333
。
在裝置上配置 Proxy 設定
接下來,您必須將 Android 裝置設定為與 Proxy 伺服器通訊。
- 在 Android 裝置上依序前往「設定」 >「Wi-Fi」。
長按你連線的網路名稱。
輕觸「修改網路」。
輕觸「進階選項」。畫面上會顯示 Proxy 設定。
輕觸「Proxy」選單,然後選取「手動」。
在「Proxy hostname」欄位中輸入
localhost
。在「Proxy 通訊埠」欄位中,輸入您在上一節「裝置通訊埠」輸入的通訊埠編號。
輕觸「儲存」。
啟用這些設定後,裝置會將所有要求轉送至開發機器上的 Proxy。Proxy 會代表您的裝置發出要求,因此可正確解析向自訂本機網域發出的要求。
現在您可以在 Android 裝置上存取自訂網域,就像在開發機器上一樣。
如果您的網路伺服器是在非標準通訊埠執行,在要求 Android 裝置的內容時,請記得指定通訊埠。舉例來說,如果您的網路伺服器在通訊埠 7331
上使用自訂網域 chrome.devtools
,那麼當您透過 Android 裝置查看網站時,則應使用網址 chrome.devtools:7331
。