Matthias Rohmer
José Luis Zapata
代理程式專用的 Chrome 開發人員工具可讓代理程式驗證回應式版面配置、測試位置資訊感知 API，以及模擬各種 CPU 或網路速度。使用這些工具找出極端情況，並更有效率地自動執行成效稽核。
這些模擬功能可搭配其他工具，讓代理程式與網站互動，例如點按元素、填寫表單及瀏覽網頁。
可模擬的項目包括：
- 可視區域和使用者代理程式： 模擬特定螢幕大小和裝置 ID。
- 地理位置：模擬位置座標，測試可感知位置的 API。
- 網路和 CPU：限制網路條件和 CPU 速度，模擬實際的效能限制。
- 色彩配置：切換淺色和深色模式。
使用模擬功能時，請注意下列事項：
- 裝置支援：代理程式可以模擬 Puppeteer 的清單中的任何裝置。
KnownDevices包括模擬行動裝置檢視區塊的觸控事件。 - 瀏覽器引擎行為：這項工具會模擬裝置特性，但不會模擬非 Chromium 瀏覽器引擎或其他作業系統。代理程式一律會在目前作業系統的 Chrome 中執行。
使用者模擬的用途
指示代理程式模擬環境並為您驗證 UI，而不是在每次變更程式碼後，手動調整瀏覽器大小、模擬 IP 或限制網路。
透過這些工作流程，將模擬功能整合到開發程序中。
反覆調整回應式設計
行動裝置和桌上型電腦的導覽模式通常差異很大。建構應用程式時，您可以指示代理程式驗證剛編寫的元件是否正確算繪，以及在不同裝置上提供相同內容。
提示範例：
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
代理程式執行範例：代理程式會開啟 Chrome 視窗、前往該頁面、啟動模擬，並比較兩個檢視區塊中的項目。確認行動裝置檢視畫面 (漢堡選單) 和電腦檢視畫面 (頁首) 包含預期連結。
驗證跨視埠互動
版面配置會在互動期間中斷，不只是在 CSS 中。靜態螢幕截圖通常會遺漏使用者實際觸控 UI 時發生的錯誤。您可以指派代理程式在多個檢視區塊中測試特定互動流程，找出隱藏的功能錯誤。
提示範例：
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
代理執行範例：代理輸入搜尋查詢，並將畫面調整為三種大小。在本例中，代理程式會發現搜尋列在平板電腦和行動裝置上會展開，填滿整個標題的寬度，遮住「登入」連結。
原型位置辨識功能
測試依據使用者實際位置的 API (例如「附近」搜尋或商店定位器) 時，通常需要手動覆寫感應器。現在，您可以指示代理程式模擬特定地理位置，輕鬆驗證前端和後端邏輯。
提示範例：
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
代理程式執行範例：代理程式會前往網站、搜尋「柏林」，然後動態插入特定經緯度座標來模擬巴黎，接著與「使用我的位置」功能互動，確保系統顯示正確的商店。