Chrome DevTools の Sensors タブを使ってみよう
はじめに
この記事は #EveOneZenn (Everyday One Zenn) vol.17 です。
Chrome DevTools に組み込まれている、センサー関連の挙動をオーバーライドできる Sensors タブについてまとめます。
前回：
Sensors タブを表示する
Chrome DevTools の Sensors タブは メニュー（三点ドット）→ More tools → Sensors から表示できます。
Elements や Console といったメインのパネルが並んでいる上部のナビゲーションではなく、下部のナビゲーションで Sensors パネルが表示されます。
Sensors タブの機能
Sensors タブで使用できる各種機能を紹介します。
Location
ブラウザがアプリケーションに提供する位置情報やタイムゾーン、言語をオーバーライドします。
ドロップダウンから登録されている地点の情報を使用するか、手動で情報を入力するかを選択できます。
また、 Location unavailable を選択すれば位置情報が取得できなかった状況を再現できます。
地点の登録・編集は Manage ボタンからアクセスできる設定で行います。
デバッグで頻繁に使用する地点があれば登録すると良いでしょう。
Orientation
ブラウザがアプリケーションに提供するデバイスの向きをオーバーライドします。
ドロップダウンから基本的な方向を選択できるほか、 Custom orientation では数値と右のモデルを実際に回して方向を設定できます。
Touch
アプリケーション上で検知するクリックイベントを強制的にタッチイベントに変更するか設定します。
Device-based は現在のデバイスの設定を使用しますが、 Force enabled は常にタッチイベントが発火するようになります。
Emulate Idle Detector state
ユーザーのアクティブ状態を検知する Idle Detection API の受け取る状態をオーバーライドします。
ドロップダウンから「ユーザーがアクティブか」と「スクリーンがロックされているか」を設定できます。
なお、 Idle Detection API は Google Chrome ではフラグを有効にしないと使用できません。
関連記事
Discussion
センサーの環境まで確認できるとは知らなかった・・・・・情報ありがとうございます。