モバイル向けの開発も、デスクトップ向けの開発と同じくらい簡単でなければなりません。Google は、Chrome DevTools でのユーザーの利便性向上に懸命に取り組んでいます。今回は、モバイルウェブ開発を大幅に改善できる新機能を発表します。最初にリモート デバッグを行い、次に適切なモバイル エミュレーションについて説明します。
デバイスの画面をパソコンにスクリーンキャストする
これまでは、リモート デバッグを行うときは、デバイスと開発ツールの間を行き来する必要がありました。スクリーンキャストでは、開発ツールの横にデバイスの画面が表示されるようになりました。これは素晴らしいことですが、操作するとさらに効果的です。
- スクリーンキャストのクリックはタップに変換され、デバイスで適切なタッチイベントが発生します。
- デスクトップ ポインタを使用してデバイス上の要素を検査する
- デスクトップ キーボードで入力する - すべてのキー入力がデバイスに送信されます。親指を使って入力する手間を省くことができます。
- ページをスクロールするには、ポインタをフリングするか、ノートパソコンのトラックパッドをスライドします。
スクリーンキャストに関する完全なドキュメントには、ピンチズーム操作の送信など、これらすべてが記載されています。Android 版 Chrome（ベータ版）（m32）が必要です。
簡単なリモート デバッグ
18 か月前、Chrome には WebKit ブラウザ向けの適切なリモート デバッグが導入されましたが、当時は、Android SDK のダウンロードを 400 MB 行え、adb バイナリを $PATH に追加して、魔法のようなコマンドライン インキャンティングを行う必要がありました。
そうしたデータはすべて消去できますChrome で USB 接続デバイスをネイティブに検出して通信できるようになりました。Chrome では adb プロトコルを USB 経由で直接実装しているため、Menu > Tools > Inspect Devices で簡単にリモート デバッグ セッションを開始できます。
この方法は ChromeOS を含むすべてのプラットフォームで問題なく機能しますが、Windows でデバイスと通信するには、まず適切な USB ドライバをインストールする必要があります。これまでに使用したことがない場合は、デバイスで USB デバッグを有効にし、Chrome for Android（ベータ版）を使用していることを確認する必要があります。ドキュメントの全文を読む。
ローカル プロジェクトのポート転送
localhost:8000 で開発していますが、スマートフォンからアクセスできません。そこで、リモート デバッグ ワークフローに直接ポート転送を追加しました。これで、トンネリング ハッキングなしで、プロジェクト全体を簡単にこなせるようになりました。about:inspect で [ポート転送] をクリックして、使用可能にするポートを設定します。問題がなければ、ポートが緑色で点灯します。
モバイル エミュレーション
互換性のテストに必要なデバイスが常にあるとは限りませんよね？実機のリモート デバッグは、実機で最高のパフォーマンスを発揮しますが、多くのデバイスの特性をパソコンで現実的にエミュレートできるため、時間の節約になり、反復処理のループがはるかに高速になります。
フルタッチイベントのシミュレーションで画面サイズ、devicePixelRatio、<meta viewport> をエミュレートする
これまでの「デバイスに関する指標」機能をご覧になった方にとっては、大幅なアップグレードとなります。チームは、新しいモバイル エミュレーションによって、実際のデバイスに表示されるものをほぼリアルに再現できるよう懸命に取り組んできました。たとえば、WebKit ブラウザは複雑なテキスト自動サイズ調整アルゴリズムを管理しており、実際のところ、各デバイスにはテキストの自動サイズ調整のための特定の「ファッジ係数」があり、これはテキストを読みやすくするために変更されます。エミュレーション モードでは、この動作が適用されていることと、結果を確認できます。
デバイスのピクセル比
これまでは、低 DPI デバイスで高 DPI デバイスがどのように表示されるかを確認することはほぼ不可能でした。これで、DevTools の dPR エミュレーションでビューが適応され、深い DPI シナリオにズームインできるようになります。また、window.devicePixelRatio、@media (-webkit-min-device-pixel-ratio: 2)、image-set( url(pic2x.jpg) 2x, …) などに設定を反映させることで、さまざまな dpi 固有のアセットを読み込むなど、アプリがどのように適応しているのかを確認できます。
デバイス エミュレーションは、ブラウザの機能やバグにまで及ぶものではありません。そのため、iOS をエミュレートしても WebGL は動作し、iOS 5 での画面の向き拡大のバグは発生しません。このばらつきを体験するには、デバイスに向かってください。
<meta viewport>（および @viewport）の適切なエミュレーション
これまでは、width=device-width と minimum-scale:1.0 の動作のテストはデバイス専用ゲームでした。これで、さまざまなビューポートを簡単に試して、レンダリングの様子を確認できるようになりました。
タッチイベントのシミュレーション
[タッチ スクリーンのエミュレート] 設定により、クリックが touchstart などのように解釈されるようになります。また、ズーム、スクロール、パンなどの合成イベントも機能します。ピンチズームでコンテンツをズームインするには、shift キーを押しながらドラッグするか、shift キーを押しながらスクロールします。ビューポートの外側にスケーリングされたコンテンツの詳細を確認できます。
最後に、ユーザー エージェントのなりすまし（リクエスト ヘッダーと window.navigator レベルの両方で）、位置情報、向きのエミュレーションに対してスタンバイ モードを使用することで、デバイスの機能全体を試すことができます。
デバイス プリセット
エミュレーション プリセットを使用してスマートフォンまたはタブレットを選択すると、そのデバイスに適用される適切な画面サイズ、dPR、UA に加えて、フルタッチ イベントとビューポートもエミュレートされます。特定のプリセットを試すことも、特徴を 1 つずつ簡単に調整することもできます。
devtools.chrome.com にアクセスして、DevTools を使用したモバイル エミュレーションに関するドキュメント全文をご覧ください。
デモ
これらの機能の実例の完全なデモについては、モバイル向け DevTools での Chrome Dev Summit での 23 分間のトークをご覧ください。