用Chrome在手機上調試本地網頁代碼

本文轉載自查看原文 2016-11-04 09:43 5918 Web前端

本文摘自Google

原文地址1：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3#port-forwarding

原文地址2：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server

注意：需要翻牆才能訪問原文地址

原文翻譯內容：

主機開發計算機網絡服務器上的站點，然后從Android設備訪問內容。

使用USB電纜和Chrome DevTools，可以運行從開發機器網站，然后查看該網站在Android設備上。

TL; DR

端口轉發，您可以查看您的Android設備上從開發機器的Web服務器內容。
如果您的Web服務器使用的是自定義域，你可以設置你的Android設備在使用自定義域映射域訪問內容。

設置端口轉發

端口轉發使您的Android設備到的正在開發計算機的Web服務器上訪問內容。端口轉發的工作原理是建立在Android設備上映射到一個TCP端口在開發機器上監聽TCP端口。端口之間的通信通過Android設備和開發計算機之間的USB連接出行，因此連接不依賴於你的網絡配置。

要啟用端口轉發：

設置遠程調試您的開發機和Android設備之間。當你完成，你應該看到的左側菜單Android設備檢查設備對話框和連接狀態指示燈。
在檢查設備在DevTools對話框中，啟用端口轉發。
點擊添加規則。

1.在設備端口左側文本框，輸入localhost從中你希望能夠訪問該站點在Android設備上的端口號。例如，如果你想訪問從網站上localhost:5000 您可以輸入5000。1.在本地地址右側文本框，輸入IP地址或主機名上你的網站是您的開發機器的Web服務器上運行，其次是端口號。例如，如果您的網站上運行localhost:7331，你會進入localhost:7331。1.單擊添加。

端口轉發現在成立。你可以看到前進中的設備選項卡上的端口的狀態指示燈檢查設備對話框。

要查看的內容，打開Chrome瀏覽器在Android設備上，轉到localhost您在指定的端口設備端口字段。例如，如果你輸入5000的字段，然后你會去 localhost:5000。

地圖自定義地域

自定義域映射使您能夠從使用自定義域在開發機器上的Web服務器在Android設備上觀看內容。

例如，假設您的網站使用了第三方JavaScript庫，僅適用於列入白名單的域chrome.devtools。所以，你創建一個在您的條目hosts在開發機器上的文件映射到這個域localhost（即127.0.0.1 chrome.devtools）。設置自定義域映射端口轉發后，您就可以在URL查看網站在Android設備上chrome.devtools。

設置端口轉發到代理服務器

要映射自定義域，你必須運行在開發機器上的代理服務器。代理服務器的例子是查爾斯，魷魚和提琴手。

要設置端口轉發到代理：

運行代理服務器，請注意，它使用的端口。注：代理服務器和Web服務器必須在不同的端口上運行。
設置端口轉發到你的Android設備。對於 本地地址欄中，輸入localhost:之后，你的代理服務器上運行的端口。例如，如果是在端口上運行8000，那么你會進入localhost:8000。在設備端口字段中輸入您希望您的Android設備上偵聽，如數字3333。

在設備上配置代理服務器設置

接下來，你需要配置你的Android設備與代理服務器進行通信。