總覽
使用「網路條件」面板覆寫「使用者代理程式」字串,並模擬不同的網路速度。
覆寫使用者代理程式字串會改變瀏覽器向網路伺服器識別自己的方式。這表示瀏覽器可以模擬較舊的版本或完全不同的瀏覽器,因此非常適合用來測試回應式設計、相容性和功能偵測。
請注意,覆寫使用者代理程式字串並不會影響 Chrome 瀏覽器內部的運作方式,但會變更 Chrome 提供的內容。
開啟「網路狀況」面板
開啟「網路」面板中的「網路條件」面板,或透過開發人員工具手動開啟。
如要使用「網路」面板開啟「網路條件」面板,請按照下列步驟操作:
- 開啟開發人員工具。
- 前往「網路」面板。
- 按一下 network_manage 其他網路狀況按鈕,開啟「網路狀況」面板。
![「更多網路狀況」按鈕和「網路狀況」面板已開啟。](https://developer.chrome.com/static/docs/devtools/device-mode/override-user-agent/image/network-to-conditions.png?authuser=9&hl=zh-tw)
如何手動開啟「網路條件」面板:
- 開啟開發人員工具。
按下以下指令開啟「Command」選單:
- macOS:Command + Shift + P 鍵
- Windows、Linux、ChromeOS:Control + Shift + P 鍵
圖 2. 命令選單
開始輸入
Network conditions
,選取「顯示網路條件」,然後按下 Enter 鍵。開發人員工具會在開發人員工具視窗底部顯示「網路狀況」面板。
或者,依序選取右上角的 more_vert 和 [更多選項] > [更多工具] > [網路條件]。
覆寫使用者代理程式字串
如要覆寫「網路條件」面板中的使用者代理程式字串,請按照下列步驟操作:
- 開啟「網路條件」面板。
在「使用者代理程式」部分中,停用「使用瀏覽器預設值」核取方塊。
圖 3. 停用「使用瀏覽器預設值」 從清單中選取使用者代理程式字串,或自行輸入自訂字串。
如要查看結果,請重新整理頁面。
編輯使用者代理程式用戶端提示
「Network conditions」面板可讓您自訂所選使用者代理程式字串的「User-Agent Client Hints」。
如要使用這項功能,請按照下列步驟操作:
- 從清單中選取使用者代理程式字串,或自行輸入自訂字串。
按一下 arrow_drop_down 下拉式選單。系統隨即會顯示表單,並在其中自動填入相關值。
圖 4. 使用者代理程式用戶端提示表單 編輯表單時,按一下 [刪除] 可刪除項目,按一下 [新增品牌] 則可新增至「使用者代理程式」和「完整版」清單。
完成後,請按一下表單底部的「更新」按鈕。
如要查看結果,請重新整理頁面。
限制網路速度
如要透過「網路狀況」面板限制網路速度,請按一下「網路節流」清單,然後選取「Fast 3G」、「慢 3G」或「離線」。
![「網路狀況」面板中的「網路節流」下拉式選單。](https://developer.chrome.com/static/docs/devtools/device-mode/override-user-agent/image/network-presets.png?authuser=9&hl=zh-tw)
此外,「網路」面板可讓您透過類似方式調節網路速度,只要開啟「網路」面板,然後從動作列的「Throttle 清單」中選取所需速度即可。
![「網路」面板中的「網路節流」下拉式選單。](https://developer.chrome.com/static/docs/devtools/device-mode/override-user-agent/image/network-presets-2.png?authuser=9&hl=zh-tw)
您也可以使用「Performance」面板來限制網路速度。開啟效能面板,按一下「設定」,然後從「網路」清單中選取「Fast 3G」或「Slow 3G」。
![「Performance」(效能) 面板中的網路節流下拉式選單。](https://developer.chrome.com/static/docs/devtools/device-mode/override-user-agent/image/network-presets-3.png?authuser=9&hl=zh-tw)
建立網路節流設定檔,設定您自己的自訂網路節流參數。若要瞭解做法,請參閱「節流」一文。