Chrome DevTools での Device Mode によるモバイル端末のシミュレート

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

Device Mode では、モバイル端末でサイトのページがどのように見えて機能するか、実際に近い見た目で確認できます。

Device Mode は、モバイル端末のシミュレーションを行える Chrome DevTools の諸機能をまとめて呼ぶときの呼称です。 以下の機能が含まれます。

• モバイル ビューポイントのシミュレーション
• ネットワークのスロットリング
• CPU のスロットリング
• 位置情報のシミュレーション
• 画面の向きの設定

制限事項

Device Mode はモバイル端末におけるページのルック アンド フィールの 1 次近似 として利用できます。 Device Mode を使用する場合、モバイル端末でコードを実際に実行することはありません。 ノートパソコンまたはデスクトップ パソコンからモバイル ユーザーの体験をシミュレーションします。

モバイル端末のある面については、DevTools でシミュレーションすることができません。 たとえば、モバイル CPU のアーキテクチャは、ノートパソコンやデスクトップ パソコンの CPU のアーキテクチャとは大きく異なります。 不明な点がある場合は、モバイル端末でページを実際に実行してみるのが最善です。 モバイル端末でページのコードが実際に実行されている間に、ノートパソコンやデスクトップ パソコンからページのコードを表示、変更、デバッグ、およびプロファイル作成するには、Remote Debugging を使用します。

モバイル ビューポートのシミュレーション

[Toggle Device Toolbar] をクリックすると、{: .inline-icon } モバイル ビューポートをシミュレーションできる UI が開きます。

デフォルトでは、Device Toolbar は Responsive Viewport モードで開きます。

Responsive Viewport モード

ハンドルをドラッグして、ビューポートのサイズを自由に変更できます。 または、幅と高さのボックスに特定の値を入力することもできます。 図 2 では、幅を 628 に、高さを 662 に設定しています。

メディアクエリの表示

ビューポートの上部にメディアクエリのブレークポイントを表示するには、[More options] をクリックして[Show media queries] を選択します。

ビューポートの幅を変更するためにブレークポイントをクリックすると、ブレークポイントがトリガーされた状態になります。

モバイル端末の Viewport モード

特定のモバイル端末のサイズをシミュレーションするには、[Device] リストから端末を選択します。

ビューポートの画面の向きを横向きに回転する

[Rotate] をクリックすると、{: .inline-icon } ビューポートの画面の向きが横向きに回転します。

Device Toolbar の幅が狭いと、[Rotate] ボタンが表示されなくなることに注意してください。

画面の向きの設定も参照してください。

端末フレームの表示

iPhone 6 などの特定のモバイル端末の寸法にシミュレートする場合は、[More options] を開いて[Show device frame] を選択して、ビューポートの周りの物理端末フレームを表示します。

注: 特定の端末の端末フレームが表示されない場合は、DevTools にその特定の端末のアート情報がないのかもしれません。

ルーラーの表示

[More options] をクリックしてから [Show rulers] を選択すると、ビューポートの上部と左側にルーラーが表示されます。 ルーラーのサイズ指定単位はピクセルです。

ビューポートのズーム

ズームインまたはズームアウトするには、[Zoom] リストを使用します。

ネットワークおよび CPU のスロットリング

ネットワークおよび CPU をスロットリングするには、[Throttle] リストから [Mid-tier mobile] または [Low-end mobile] を選択します。

[Mid-tier mobile] は高速 3G をシミュレートし、CPU を通常より 4 倍低速になるようにスロットリングします。 [Low-end mobile] は低速 3G をシミュレートし、CPU を通常より 6 倍低速になるようにスロットリングします。 スロットリングは使用するノートパソコンまたはデスクトップ パソコンの通常の能力に比例したものになることを覚えておいてください。

Device Toolbar の幅が狭いと [Throttle] リストが非表示になることに注意してください。

CPU のみのスロットリング

CPU のみをスロットリングしてネットワークはスロットリングしない場合は、[Performance] パネルで [Capture Settings] をクリックしてから、{:.inline-icon}[CPU] リストから [4x slowdown] または [6x slowdown] を選択します。

ネットワークのみのスロットリング

ネットワークのみをスロットリングして CPU をスロットリングしない場合は、[Network] パネルで [Throttle] リストから [Fast 3G] または [Slow 3G] を選択します。

または、Command+Shift+P（Mac）または Control+Shift+P（Windows、Linux、Chrome OS）を押してコマンド メニューを開き、3G と入力し、[Enable fast 3G throttling] または [Enable slow 3G throttling] を選択します。

[Performance] パネルからネットワーク スロットリングを設定することもできます。 [Capture Settings] をクリックし、{: .inline-icon } [Network] リストから [Fast 3G] または [Slow 3G] を選択します。

位置情報のオーバーライド

位置情報オーバーライド UI を開くには、[Customize and control DevTools] をクリックして、{: .inline-icon } [More tools] > [Sensors] の順に選択します。

または、Command+Shift+P（Mac）または Control+Shift+P（Windows、Linux、Chrome OS）を押してコマンド メニューを開き、Sensors と入力し、[Show Sensors] を選択します。

[Geolocation] リストからいずれかのプリセットを選択したり、[Custom location] を選択して座標を入力したり、[Location unavailable] を選択して位置情報がエラー状態にある場合のページ動作をテストしたりできます。

画面の向きの設定

画面の向き UI を開くには、[Customize and control DevTools] をクリックして、{: .inline-icon } [More tools] > [Sensors] の順に選択します。

または、Command+Shift+P（Mac）または Control+Shift+P（Windows、Linux、Chrome OS）を押してコマンド メニューを開き、Sensors と入力し、[Show Sensors] を選択します。

[Orientation] リストからいずれかのプリセットを選択するか、または [Custom orientation] を選択してアルファ、ベータ、およびガンマ値を設定します。

フィードバック

フィードバックをお送りいただくその他の方法については、Join the DevTools community をご覧ください。