モバイル向けの開発は、デスクトップ向けの開発と同じくらい簡単であるべきです。Google は Chrome DevTools で利便性の向上に取り組んできました。そしてこのたび、モバイルウェブの開発を劇的に改善する新機能を発表する運びとなりました。まずはリモート デバッグです。次に適切なモバイル エミュレーションを発表します。
デバイスの画面をパソコンにスクリーンキャストします
これまで、リモート デバッグでは、デバイスと開発ツールの間を行き来する必要がありました。スクリーンキャストでデバイスの画面を DevTools と並べて表示できるようになりました。目で見てもいいですが、実際に使うとさらに効果があります。
- スクリーンキャストのクリックはタップに変換され、デバイスで適切なタッチイベントが発生します。
- デスクトップ ポインタを使用してデバイスの要素を調べる
- デスクトップ キーボードで入力する。すべてのキー入力がデバイスに送信されます。親指で入力する手間が省けます。
- ページをスクロールするには、ポインタでフリングするか、ノートパソコンのトラックパッド上でスライドします。
スクリーンキャストに関する詳細なドキュメントには、ピンチズーム操作の送信など、これらすべての内容が記載されています。Android 版 Chrome ベータ版（m32）が必要です。
簡単なリモート デバッグ
18 か月前に、Chrome に WebKit ブラウザ向けの適切なリモート デバッグが導入されました。しかし、実際に試した場合、400 MB の Android SDK をダウンロードしなければならず、adb バイナリを $PATH に追加し、いくつかの魔法のようなコマンドラインの魔法を出す必要がありました。
そうしたデータをすべて消去できるのです。Chrome で USB 接続されたデバイスをネイティブに検出して通信できるようになりました。Chrome では adb プロトコルが USB 経由で直接実装されているため、Menu > Tools > Inspect Devices にアクセスしてすぐにリモート デバッグ セッションを開始できます。
これは Chrome OS を含むすべてのプラットフォームで問題なく機能しますが、Windows でデバイスと通信するには、まず適切な USB ドライバをインストールする必要があります。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 に関する 23 分間の Chrome Dev Summit での講演をご覧ください。