Sensors：模擬裝置感應器

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用「Sensors」分頁模擬任何裝置的感應器輸入：

開啟「Sensors」分頁

  1. 根據您的作業系統，按下列方式開啟指令選單：

    • 在 MacOS 上，請按 Command + Shift + P 鍵
    • 如果是 Windows、Linux 或 ChromeOS，請按 Control + Shift + P 鍵

    使用指令選單開啟「Sensors」分頁。

  2. 輸入 sensors，選取「Show Sensors」，然後按下 Enter 鍵。開發人員工具視窗底部隨即會開啟「Sensors」分頁。

覆寫地理位置

許多網站會善加利用使用者位置資訊，為使用者提供更符合需求的體驗。舉例來說，天氣網站在使用者授權網站存取他們所在位置後，可能會顯示當地天氣預報。

如果要建構的 UI 會根據使用者所在位置而變更，建議您確保網站在全球不同的位置運作正常。

如要覆寫您的地理位置，請開啟「Sensors」分頁，然後在「Geolocation」清單中選取下列其中一個選項：

  • 其中一個預設城市，例如東京。
  • 自訂位置：輸入自訂經緯度座標。
  • 選取「無法取得位置資訊」，查看網站在無法擷取使用者位置資訊時的行為。

在「地理位置」清單中選取「東京」。

模擬裝置螢幕方向

如要模擬不同的裝置螢幕方向，請開啟「Sensors」分頁，然後在「Orientation」清單中選取下列其中一個選項：

  • 其中一個預設方向，例如「直向上下顛倒」。
  • 自訂方向，提供您自己的確切方向。

在「方向」清單中選取「直向上下顛倒」。

選取「自訂方向」後，系統會啟用「alpha」、「beta」和「gamma」欄位。如要瞭解這些軸的運作方式，請參閱 Alpha 版、Beta 版和 Gamma。

您也可以拖曳方向模型來設定自訂方向。如要沿著 alpha 軸旋轉，請先按住 Shift 鍵再拖曳。

方向模型

強制觸控

如果想測試網站的觸控事件，即使您是在沒有觸控螢幕的裝置上進行測試，仍然可以強制觸控 (而非點擊) 點擊。

如何使用指標觸發觸控事件：

  1. 開啟「Sensors」分頁標籤。
  2. 在「輕觸」下拉式清單下方，選取「Force Touch」。以觸控而非點擊。
  3. 在頂端提示中，按一下「Reload DevTools」。

模擬閒置偵測工具狀態

Idle Detection API 可讓您偵測不活躍使用者，並針對閒置狀態變更做出回應。您可以使用開發人員工具模擬使用者狀態和螢幕狀態的閒置狀態變化，不必等待實際的閒置狀態變更。

如何模擬閒置狀態：

  1. 開啟「Sensors」分頁標籤。在本教學課程中，您可以嘗試前往這個示範頁面。

  2. 勾選「臨時」旁的核取方塊，然後在提示訊息中授予示範頁面，授予閒置偵測權限。接著，請重新載入頁面。

    授予示範頁面的閒置偵測權限。

  3. 在「Emulate Idle Detectionor State」下拉式選單中，選取下列其中一個選項：

    • 沒有閒置的模擬
    • 使用者未活動，螢幕已解鎖
    • 使用者未活動，螢幕已鎖定
    • 使用者閒置中，螢幕已解鎖
    • 使用者閒置中，螢幕已鎖定

在示範頁面上，選取閒置和已鎖定的狀態。

在本例中，開發人員工具會模擬「使用者閒置中、螢幕鎖定」狀態，而在這個情況下，示範頁面會開始倒數 10 秒來清理畫布。