センサー: デバイス センサーをエミュレートする

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

センサー パネルを使用して、任意のデバイスのセンサー入力をエミュレートします。

概要

[センサー] パネルでは、次のことができます。

[センサー] パネルを開く

  1. オペレーティング システムに応じて、次のキーを押してコマンド メニューを開きます。

    • macOS の場合: Command+Shift+P
    • Windows、Linux、ChromeOS の場合: Ctrl+Shift+P

    コマンド メニューを使用して [センサー] パネルを開く。

  2. 「sensors」と入力し、[センサーを表示] を選択して、Enter キーを押します。[センサー] パネルが DevTools ウィンドウの下部に開きます。

位置情報をオーバーライドする

多くのウェブサイトでは、ユーザー エクスペリエンスを向上させるためにユーザーの位置情報を活用しています。たとえば、ユーザーがウェブサイトに位置情報へのアクセスを許可すると、そのユーザーの地域の天気予報がウェブサイトに表示されることがあります。

ユーザーの所在地に応じて変化する UI を構築している場合は、世界各地でサイトが正しく動作することを確認する必要があります。

位置情報をオーバーライドするには、[センサー] パネルを開き、[位置情報] リストから次のいずれかを選択します。

  • 東京などのプリセットされた都市の 1 つ。
  • [カスタムの場所] で、カスタムの経度と緯度の座標を入力します。
  • [位置情報が利用できない] を選択すると、ユーザーの位置情報が利用できない場合のサイトの動作を確認できます。

[Geolocation] リストから [Tokyo] を選択している。

デバイスの向きをシミュレートする

さまざまなデバイスの向きをシミュレートするには、[センサー] パネルを開き、[向き] リストから次のいずれかを選択します。

  • 縦向き（上下逆）など、プリセットの向きのいずれか。
  • カスタムの向き: 独自の正確な向きを指定します。

[向き] リストから [縦（上下反転）] を選択している。

[カスタムの向き] を選択すると、アルファ、ベータ、ガンマの各フィールドが有効になります。これらの軸の仕組みについては、アルファ、ベータ、ガンマをご覧ください。

[Orientation Model] をドラッグして、カスタムの向きを設定することもできます。Shift キーを押しながらドラッグすると、アルファ軸に沿って回転します。

オリエンテーション モデル。

強押し

ウェブサイトでタッチイベントをテストするには、タッチスクリーンがないデバイスでテストしている場合でも、クリックではなくタッチを強制できます。

ポインタでタッチイベントをトリガーするには:

  1. [Sensors] パネルを開きます。
  2. [タッチ] プルダウン リストで、[強押し] を選択します。 クリックではなくタップを強制します。
  3. 上部のプロンプトで [Reload DevTools] をクリックします。

アイドル検出ツールの状態をエミュレートする

アイドル状態検出 API を使用すると、非アクティブなユーザーを検出し、アイドル状態の変化に対応できます。DevTools を使用すると、実際のアイドル状態が変化するのを待つのではなく、ユーザーの状態と画面の状態の両方でアイドル状態の変化をエミュレートできます。

アイドル状態をエミュレートするには:

  1. [Sensors] パネルを開きます。

  2. [一時的] の横にあるチェックボックスをオンにし、プロンプトでデモページにアイドル状態の検出権限を付与します。その後、ページを再読み込みします。

    デモページでアイドル状態の検出権限を付与する。

  3. [アイドル検出器の状態をエミュレート] プルダウンで、次のいずれかを選択します。

    • アイドル状態のエミュレーションなし
    • ユーザー アクティブ状態、画面ロック解除
    • ユーザー アクティブ状態、画面ロック中
    • ユーザー アイドル状態、画面ロック解除
    • ユーザー アイドル状態、画面ロック中

デモページでアイドル状態とロック状態を選択する。

ハードウェアの並行処理をエミュレートする

プロセッサ コアの数が異なるデバイスでのウェブサイトのパフォーマンスをエミュレートするには、navigator.hardwareConcurrency プロパティによって報告される値をオーバーライドします。一部のアプリケーションでは、このプロパティを使用してアプリケーションの並列処理の程度を制御します（たとえば、Emscripten pthread プールサイズを制御します）。

ハードウェアの並行処理をエミュレートするには:

  1. [Sensors] パネルを開きます。
  2. パネルの下部で、[ ハードウェアの同時実行] を見つけてオンにします。
  3. 数値入力ボックスに、エミュレートするコアの数を入力します。

コア数を 10 に設定して「ハードウェアの同時実行」をオンにしました。

デフォルト値に戻すには、[] [リセット] ボタンをクリックします。

CPU 負荷をエミュレートする

CPU またはコンピューティング プレッシャーは、システム コンピューティングがどの程度のワークロードを処理しているか、上限に近いかどうかを把握できる一連のレポート状態です。この情報を使用すると、ビデオ会議やビデオゲームなどのリアルタイム アプリケーションを適応させて、利用可能なすべての処理能力を活用しながら、ワークロードをリアルタイムで適応させることでシステムの応答性を維持できます。

[センサー] パネルでは、Compute Pressure API によってレポートされる状態をエミュレートできます。

ウェブサイトで CPU プレッシャーをエミュレートするには:

  1. [Sensors] パネルを開きます。
  2. パネルの下部付近にある [CPU pressure] セクションで、人間が読める圧力状態（[No override]、[Nominal]、[Fair]、[Serious]、[Critical] のいずれか）を選択します。
  3. DevTools の上部に表示されるプロンプトで、[DevTools を再読み込み] をクリックします。

「重大」な CPU 負荷をエミュレートしています。