Chromebook モバイル向け Chrome DevTools を試してみた。

 Chromebookでモバイル向けChrome DevToolsを試してみました。

• USBで接続されたデバイスの検知がネイティブサポートされた。
• Chrome Beta Android版、ブラウザ版、ChromeOSが可能である。
• 拡張機能の設定が不要である。
• スクリーンキャスト機能と、リモートデバッグ機能が利用できる。

これまで、Chromeに拡張機能やコマンドラインツールを、インストールして利用可能な機能でしたが、Chromeネイティブでサポートされるようになりました。また、スクリーンキャスト機能が盛り込まれました。さて、どんなものか、早速、ChromebookとNexus 5で試してみます。

Chromium Blog: Chrome DevTools for Mobile: Emulate and Screencast : 
モバイル向け Chrome DevTools：エミュレーションとスクリーンキャスト - Google Japan Developer Relations Blog :
Remote Debugging Chrome on Android - Chrome DevTools — Google Developers : 

 Chromeの検索窓の下記を入力します。

about:inspect/#devices

端末の開発者向けオプションから、USBデバックにチェックを入れ、デバックモードで接続します。「USBデバックを許可しますか」と聞かれます。Chromebookで、Nexus端末がデバックモードで接続できます。

チェックを入れると。Port 8080が開きます。Nexus 5には、Chromeの安定版とBeta版が入っています。それぞれが反映されます。

早速、Beta版v32で試してみます。サイトURLを入力します。

こんな感じで、モバイル版Chromeにサイトが反映されます。

inspectを開いてみると、サイトのデバックができます。

ChromebookでUSBデバックモードで接続できるというのは、ちょっと感動です。普段、何に使うの？という疑問はさておき、Webやアプリ制作者の方にとっては、便利な機能です。