モバイル デバイスをエミュレートする (デバイス エミュレーション)

デバイス エミュレーション ツール (デバイス モードとも呼ばれます) を使用して、モバイル デバイスでのページの外観と応答を概算します。

DevTools には、次のモバイル デバイス エミュレーション機能が用意されています。

• モバイル ビューポートをシミュレートする
• ネットワークを調整する
• CPU を調整する
• 位置情報を上書きする
• 向きを設定する
• ユーザー エージェント文字列を設定する
• ユーザー エージェント クライアント ヒントを設定する

制限事項

デバイス エミュレーション は、モバイル デバイス上のページの外観の 一次近似 です。 デバイス エミュレーション は、実際にはモバイル デバイスでコードを実行しません。 代わりに、ノート PC またはデスクトップからモバイル ユーザー エクスペリエンスをシミュレートします。

モバイル デバイスの一部の側面は、DevTools ではエミュレートされません。 たとえば、モバイル CPU のアーキテクチャは、ノート PC やデスクトップ CPU のアーキテクチャとは異なります。 疑問がある場合は、モバイル デバイスでページを実際に実行することをお勧めします。

リモート デバッグを使用して、ページがモバイル デバイス上で実際に実行されている間に、コンピューターからページのコードを操作します。 コードの操作中に、表示、変更、デバッグ、プロファイル、または 4 つすべてを表示できます。 コンピューターは、ノートブックコンピューターまたはデスクトップ コンピューターにすることができます。

モバイル ビューポートをシミュレートする

[ デバイス エミュレーションの切り替え ()] を選択するか、[ DevTools (...) >デバイス エミュレーション のカスタマイズと制御] を選択して、モバイル ビューポートをシミュレートできる UI を開きます。

既定では、デバイス ツール バーはレスポンシブ ビューポート モードで開きます。

レスポンシブ ビューポート モード

複数の画面サイズでページの外観をすばやくテストするには、ハンドルをドラッグしてビューポートのサイズを必要な寸法に変更します。 幅と高さのボックスに任意の数値を入力できます。 ブラウザー ウィンドウで使用できるサイズより大きいサイズを選択した場合、ビューポートは自動的にスケーリングされ、大きなビューポートに対応します。

次の図では、幅が に 626 設定され、高さが に 516設定されています。

画面にさらにスペースが必要な場合は、「DevTools の配置の変更 (ドッキング解除、Dock を下へ、Dock を左に)」で説明されているように 、DevTools の位置を常に変更できます。

メディア クエリを表示する

ページでメディア クエリを定義している場合は、ビューポートの上にメディア クエリ ブレークポイントを表示して、それらのメディア クエリが有効なビューポート ディメンションに移動します。 [ その他のオプション>] [メディア クエリの表示] を選択します。

ブレークポイントを選択して、メディア クエリがトリガーされるようにビューポートの幅を変更します。

デバイスの種類を設定する

[デバイスの種類] の一覧を使用して、モバイル デバイスまたはデスクトップ デバイスをシミュレートします。

次の表では、使用可能なデバイスの種類のオプションの違いについて説明します。 Rendering メソッド列は、Microsoft Edge がページをモバイル ビューポートまたはデスクトップ ビューポートとしてレンダリングするかどうかを示します。 [カーソル アイコン] 列は、ページにマウス ポインターを合わせると表示されるカーソルの種類を示します。 [イベントによってトリガーされる] 列は、ページを操作するときにページがトリガー touch されるか click イベントであるかを示します。

オプション	レンダリング メソッド	カーソル アイコン	トリガーされるイベント
モバイル	モバイル	円形	touch
モバイル (タッチなし)	モバイル	通常	click
Desktop	Desktop	通常	click
デスクトップ (タッチ)	Desktop	円形	touch

注

[デバイスの種類] の一覧が表示されない場合は、[その他のオプション>] [デバイスの種類の追加] を選択します。

モバイル デバイス ビューポート モード

特定のモバイル デバイスのサイズをシミュレートするには、デバイス の一覧 からデバイスを選択します。

ビューポートを横向きに回転させる

横向きで Web ページをテストします。

1. ビューポートを横向きに回転するには、[ 回転 ()]を選択します。

   

   デバイス ツールバーが狭い場合は、[回転] ボタンが消えます。

2. 必要に応じて、[ 回転 ] ボタンにアクセスするには、 デバイス ツール バーの幅を大きくします。

   

下の「 向きを設定する」も参照してください。

デバイス フレームを表示する

特定のモバイル デバイスの寸法をシミュレートするには、[ その他のオプション ] を開き、[ デバイス フレームの表示 ] を選択して、ビューポートの周囲に物理デバイス フレームを表示します。

特定のデバイスに対してデバイス フレームが表示されない場合は、DevTools にそのデバイスのアートがないことを意味します。

iPhone 6 のデバイス フレーム:

カスタム モバイル デバイスを追加する

必要なモバイル デバイス オプションが既定の一覧に含まれていない場合は、カスタム デバイスを追加できます。 カスタム デバイスを追加するには:

1. [デバイス] リスト [編集] を選択します>。

   

2. [ カスタム デバイスの追加] を選択します。

3. [ エミュレートされたデバイス] で、カスタム デバイスのデバイス名、画面幅、および画面の高さを入力します。 デバイス のピクセル比、ユーザー エージェント文字列、デバイスの種類のフィールドは省略可能です。 [デバイスの種類] フィールドの既定値は [モバイル] です。

   

ルーラーを表示する

画面のサイズを測定する必要がある場合は、ルーラーを使用して画面サイズをピクセル単位で測定できます。 [ その他のオプション>] [ルーラーを表示 ] を選択すると、ビューポートの上と左側にルーラーが表示されます。

ルーラーはビューポートの上と左側に表示されます。

ビューポートをズームする

複数のズーム レベルでページの外観をテストするには、[ ズーム ] リストを使用して拡大または縮小します。

ネットワークと CPU を調整する

モバイル デバイスには、多くの場合、ネットワークと CPU の制約があります。 ページの読み込み速度と、インターネットと CPU の速度が異なる場合の応答方法をテストします。

1. [ スロットル 一覧] を選択し、プリセットを [中間層モバイル ] または [ ローエンド モバイル] に変更します。

   • 中間層モバイル は、CPU を fast 3G シミュレートして調整します。 通常の 4 倍遅くなります。
   • ローエンド モバイル は、CPU を slow 3G シミュレートして調整します。 通常の 6 倍遅くなります。

   すべての調整は、ノート PC またはデスクトップの通常の機能に基づいています。

   

   スロットルの一覧が非表示の場合、デバイス ツール バーが狭すぎます。

2. 必要に応じて、[スロットル] リストにアクセスするには、 デバイス ツール バーの幅を大きくします。

   

CPU のみを調整する

ネットワークではなく CPU のみを調整するには:

1. [ パフォーマンス ] パネルを選択し、[ キャプチャ設定 (キャプチャ設定 )] を選択。

2. [ CPU>4x の速度低下 ] または [6 倍の速度低下] を選択します。

   

ネットワークのみを調整する

CPU ではなくネットワークのみを調整するには:

1. [ネットワーク] ツールを選択し、[オンライン>高速 3G] または [低速 3G] を選択します。

   

   または、 Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して コマンド メニューを開き、「」と入力 3gし、[ 高速 3G スロットルを有効にする ] または [低速 3G スロットルを有効にする] を選択します。

   

[ パフォーマンス ] パネルからネットワーク調整を設定することもできます。

1. [キャプチャ設定( を選択し、[ネットワーク] リストを選択し、プリセットを Fast 3G または Slow 3G に変更します。

   

位置情報を上書きする

ページがモバイル デバイスからの位置情報に依存して正しくレンダリングされる場合は、位置情報オーバーライド UI を使用して異なる位置情報を指定します。

1. [DevTools (...) その他のツール> センサーのカスタマイズと制御] > を選択します。

   

   または、 Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を選択して、コマンド メニューを開きます。 「」と入力 Sensors し、[ センサーの表示] を選択します。

   

[ センサー ] パネルで、プリセットの場所のいずれかを選択するには、[ 場所 ] ドロップダウン メニューを使用します。 カスタムの場所を入力するには、[ その他 ] を選択し、カスタム位置の座標を入力します。 位置情報が利用できない場合にページがどのように動作するかをテストするには、[位置情報が 利用不可] を選択します。

向きを設定する

ページがモバイル デバイスからの向き情報に依存して正しくレンダリングされる場合は、向き UI を開きます。

1. [DevTools (...) その他のツール> センサーのカスタマイズと制御] > を選択します。

   

   または、 Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して、コマンド メニューを開きます。 と入力 Sensorsし、[ センサーの表示] を選択します。

   

   [ センサー ] パネルで、[向き] ドロップダウン メニューからプリセットの 向き を選択できます。

2. 独自の向きを入力するには、[ カスタムの向き] を選択し、独自の アルファ値、 ベータ値、 ガンマ 値を入力します。

   

ユーザー エージェント文字列を設定する

ページがモバイル デバイスのユーザー エージェント文字列に依存して適切にレンダリングされる場合は、[ ネットワーク条件 ] パネルを使用して、さまざまなユーザー エージェント文字列を指定します。

1. [DevTools (...) >その他のツール>ネットワーク条件のカスタマイズと制御] を選択します。

   

   または、 Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して、コマンド メニューを開きます。と入力 Network conditionsし、[ ネットワーク条件の表示] を選択します。

   

2. [ ユーザー エージェント] の横にある [ ブラウザーの既定の使用 ] チェック ボックスをオフにします。

3. 定義済みのユーザー エージェント文字列の一覧から選択するには、[ カスタム ] を選択します。

4. 独自のユーザー エージェント文字列を入力するには、[ カスタム ユーザー エージェントの入力] に文字列を入力します。

   

関連項目

• ユーザー エージェント文字列を上書きする

ユーザー エージェント クライアント ヒントを設定する

サイトで ユーザー エージェント クライアント ヒントが使用されている場合は、[ エミュレートされたデバイス ] パネルを使用してデバイスを追加し、ユーザー エージェント クライアント ヒントを設定します。

1. Web ページを右クリックし、[ 検査] を選択します。

2. [設定] [デバイス] > の順に選択します。

3. [エミュレートされたデバイス] パネルで、[ カスタム デバイスの追加 ] を選択し、 ユーザー エージェント クライアント ヒントを展開します。

   

4. [デバイス名] テキスト ボックスに一意の 名前 (など Test101) を入力します。

5. 既定値をそのまま使用するか、必要に応じて [幅]、[ 高さ]、[ デバイスのピクセル比率] を変更します。

6. ユーザー エージェント クライアント ヒントを次のように設定します。

   • Edge や 92 などのブランドとバージョン。 [ + ブランドの追加] を選択して、複数のブランドとバージョンのペアを追加します。
   • 92.0.1111.0 などの完全なブラウザー バージョン。
   • Windows や 10.0 などのプラットフォームとバージョン。
   • x86 などのアーキテクチャ。
   • Galaxy Nexus などのデバイス モデル。

   任意のユーザー エージェント クライアント ヒントを設定または変更できます。 必要な値はありません。

7. [追加] をクリックします。 新しいデバイスは、[ エミュレート されたデバイス] の一覧の上部にある選択した状態で表示されます。

ネットワーク ツールでユーザー エージェント クライアント ヒントを設定することもできます。「ネットワーク機能リファレンス」を参照してください。

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、 ケイス・バスク (テクニカルライター、Chrome DevTools & Lighthouse)によって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。