モバイル第 1 世代向けの新しいデバイスモード

Paul Bakaus

モバイル ファースト世代向けの新しいデバイスモード

デバイス モードは、デバイスをエミュレートしてレスポンシブ デザインを操作する方法で、1 年以上前に導入されました。初のメジャー アップグレードは Chrome 49 から開始されます。新機能

Chrome DevTools の起点がモバイルになりました。これまではモバイルをエミュレートする方法を提供していましたが、デフォルトの開発環境はデスクトップでした。モバイル エミュレーションは常にオンにする必要がありました。多くの地域でモバイルサイトの利用がパソコンサイトの利用を上回ったため、DevTools でも位置付けを変更します。

最新情報

まず、UI が合理化され、使用するスペースが大幅に削減されました。新しいデバイスモードがほとんどのユーザーのメインの開発モードになると予想されるため、メインの DevTools ナビゲーション バーを拡張する、すっきりとしたシンプルなデザインが求められました。

メディア クエリの上に表示される、デバイスの新しいクイックジャンプ ルーラー。

また、ビューポートを中央に配置し、上部に新しいクイックジャンプ デバイスの定規を追加しました。これは、レスポンシブ デザインの際に、最も一般的なデバイスサイズを把握するのに役立ちます。

最後に、多くのオプションは、可能な限りバンドルまたは切り替えボタンの背後に隠されています。これらの新しい複合オプションにより、モードを簡単に切り替えられるようになりました。特定のコントロールを切り替えたり、ツールバーの操作をカスタマイズしたりするには、その他メニューのアイコンをタップします。

デフォルトでレスポンシブ

メインの DevTools ツールバーがブラウザ ウィンドウの左側に拡張され、さまざまなモバイル デバイスとパソコンをエミュレートするための最も重要なツールが含まれています。次の 2 つの開発モードから選択できます。

• レスポンシブ
• 特定のデバイス

どちらのモードでも、ビューポートは Chrome 内の独自のサイズ変更可能なウィンドウに配置されます。これには、ブラウザ ウィンドウと DevTools を好きなように最大化でき、ページの複数のサイズをテストして行き来する際にウィンドウがジャンプしないという大きな利点があります。

レスポンシブは、特定のデバイスだけでなく、あらゆるデバイスでサイトが機能するように、アクティブな反復処理中に使用するモードです。このモードでは、ビューポートの横にあるハンドルのサイズを自由に変更できます。

[特定のデバイス] は、特定のデバイスを選択して、ビューポートをそのサイズにロックする場合に使用します。これは、リリースの直前に、いくつかの一般的なデバイスの最終的な修正や調整を行う場合に便利です。そのため、プルダウンには、あらゆる種類のデバイスの膨大なリストではなく、現在最も人気のあるデバイスのみが表示されます。デバイスを選択すると、実際のデバイスにできるだけ近い動作になるようにします。タップ イベント、ユーザー エージェント、ビューポート、デバイスの Chrome、UI（利用可能な場合）はすべてエミュレートされます。

統合リモート デバッグ

エミュレーションは、たとえ最良のものでも、限界があります。次のようなことは、エミュレーションでは現在できません。

• ボタンが親指で操作できる大きさかどうかを確認します。
• 低速のスマートフォンでサイトのパフォーマンスをテストします。
• 特定のデバイスのランダムな問題や制限をデバッグする。

これらのシナリオをすべて十分にテストするには、実際の物理デバイスを使用してテスト、操作、デバッグを行う必要があります。

これまでは、chrome://inspect に移動し、USB 経由でデバイスを接続して、DevTools でリモート デバッグ セッションを開くことができました。しかし、今回はさらに一歩進んで、リモート デバッグの外観と動作をリファクタリングし、DevTools のコアに埋め込みました。別のページに移動せずに、新しいメインメニュー内のダイアログとしてデバイスを検査に直接アクセスできるようになりました。これにより、物理的なデバッグをワークフローに簡単に組み込むことができます。スマートフォンを接続するだけで、DevTools を終了する必要はありません。

以前のエミュレーション管理機能の残りの部分の新しい場所

デベロッパー ツール全体でモバイルがデフォルトになったため、ネットワーク スロットリングなどの機能は適切な場所（この場合はネットワーク パネル）に移動されました。

センサーのエミュレーションや、印刷メディアのエミュレーションなどのレンダリング設定など、一部の機能はドロワー内の一貫した場所に移動されました。その他の機能はすべて、新しいメインメニューの [その他のツール] にあります。

これは大きな変更であり、皆様には慣れが必要となることを承知しております。デバイスモードに関する最新のドキュメントで、その内容をすべて確認できます。ご意見、ご感想は Twitter でお寄せください。140 文字を超える場合は、バグトラッカーをご利用ください（新機能のリクエストも可能です）。