Posted by 北村英志 Developer Relations Team

[この記事は Software Engineer の Pavel Feldman が The Chromium Blog に投稿した記事、Chrome DevTools for Mobile: Emulate and Screencast を元に、北村が加筆・再構成しています]

モダンなウェブアプリはモバイルデバイス上でも完璧にレンダリングされ、実行されることが期待されています。これはレスポンシブデザインや 60 fps での動作、接続性が開発早期に考慮される必要があることを意味します。我々は Chrome Beta の Android 版 と デスクトップ版 にて、改良された viewport エミュレーション、設定不要でスクリーンキャスト機能を備えた リモートデバッグ機能 を追加することで、モバイルウェブアプリの開発とデバッグをさらに手軽にしました。

アプリをデザインする際、どのスクリーンでもきれいに見せたいとお思いではないですか？ 新しい DevTools では、開発環境から離れることなく様々な人気のデバイススクリーンを試すことができるようになりました。Console の Emulation タブ (*1) からデバイスを選択するだけで、最適な viewport の数値が設定されます。この機能では正確な結果を得るため、モバイル版 Chrome と同じ viewport 値でページを実行することができます。もちろん、スクリーンレゾリューション（screen resolution）、タッチエミュレーション（touch emulation）、デバイスピクセルレシオ（device pixel ratio）、ユーザーエージェント（user agent）、センサー等、各パラメータごとに細かく設定することも可能です。


実際のデバイスにおけるパフォーマンスを計測したい場合はどうでしょう？

ChromeOS を含む Chrome Beta で、USB で接続されたデバイスの検知がネイティブでサポートされるようになりました。「ツール」 > 「デバイスを検証」メニューを選択するか、about:inspect を開いてください。設定は必要ありません。これまでのように adb コマンドラインツールを使ったり、拡張機能を入れる必要もありません。(*2)

USB で接続されている間、デバイスから DevTools に画面全体のスクリーンキャストを送信することが可能です。スクリーンキャストが利用可能な場合、Elements タブの横に専用のアイコンが表示されます。


キーボードやマウスのイベントも DevTools からデバイスに送信されるため、アプリのテスト中にデバイスに触れる必要もありません。




これら モバイルエミュレーション、USB デバッグ機能、スクリーンキャストによって、DevTools を使った開発や調査、デバッグはさらに手軽になることでしょう。Chrome Dev Summit 2013 で行われた Paul Irish のセッション動画 でこれらの機能のデモをご覧頂くことができます。

*1: DevTools の Settings > Overrides で 'Show Emulation' をチェックする必要があります。
*2: Windows ユーザーの方は USB デバイスドライバーをインストールする必要があります。