Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

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

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

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

制限事項

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

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

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

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

Device Toolbar
図 1。 Device Toolbar

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

Responsive Viewport モード

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

Responsive Viewport モードで、ビューポートのサイズを変更するためのハンドル。
図 2。 Responsive Viewport モードで、ビューポートのサイズを変更するためのハンドル。

メディアクエリの表示

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

Show media queries.
図 3。 Show media queries

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

ビューポートの幅を変更するためにブレークポイントをクリックします。
図 4。 ビューポートの幅を変更するためにブレークポイントをクリックします

モバイル端末の Viewport モード

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

[Device] リスト。
図 5。 [Device] リスト。

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

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

横向きの画面。
図 6。 横向きの画面

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

Device Toolbar
図 7。 Device Toolbar

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

端末フレームの表示

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

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

Show device frame.
図 8。 Show device frame
iPhone 6 の端末フレーム。
図 9。 iPhone 6 の端末フレーム

ルーラーの表示

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

Show rulers.
図 10。 Show rulers
ビューポート上部および左側のルーラー。
図 11。 ビューポート上部および左側のルーラー。

ビューポートのズーム

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

ズーム。
図 11。 ズーム

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

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

[Throttle] リスト。
図 12。 [Throttle] リスト。

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

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

Device Toolbar
図 13。 Device Toolbar

CPU のみのスロットリング

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

[CPU] リスト。
図 14。 [CPU] リスト

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

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

[Throttle] リスト。
図 14。 [Throttle] リスト。

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

コマンド メニュー
図 15。 コマンド メニュー

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

[Performance] パネルからのネットワーク スロットリングの設定。
図 16。 [Performance] パネルからのネットワーク スロットリングの設定

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

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

Sensors
図 17。 Sensors

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

Show Sensors
図 18。 Show Sensors

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

Geolocation
図 19。 Geolocation

画面の向きの設定

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

Sensors
図 20。 Sensors

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

Show Sensors
図 21。 Show Sensors

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

Orientation
図 22。 Orientation

フィードバック

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

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