今日のWebは、デスクトップよりも携帯電話で閲覧されています。 デバイスは本当にポータブルになり、画面サイズが小さくなっているためです。 したがって、Webアプリケーションを開発している場合、携帯電話（AndroidまたはiOS）のサポートを回避することはできません。 モバイル画面でサイトが壊れていたり、見栄えが悪いと、オンラインでの評判が損なわれる可能性があります。 電話でのユーザーエクスペリエンスは、デスクトップとはまったく異なります。 そのため、開発者はモバイル画面に適応するようにアプリケーションを特別に設計する必要があります。
Google Chrome Devは、デバイス上のエクスペリエンスを検査、デバッグ、分析できるツールを提供します。ローカルマシンでChrome Devツールを使用して、モバイルデバイスでアプリケーションをデバッグできます。 このチュートリアルでは、Androidでリモートデバッグするようにローカル開発マシンをセットアップする方法について学習します。 モバイルデバイスとローカル開発マシン間のUSB接続を介してデバッグします。
リモートデバッグを進めるには、次のものが必要になります。
- Chrome for Android 28がインストールされたAndroidモバイルまたはタブレット（からインストールできます） ここから).
- Androidデバイスをローカル開発マシンに接続するためのUSBケーブル。また、Androidモバイルをコンピューターに接続するために必要なドライブがインストールされていることを確認してください。
- チェック OEMUSBドライバーリスト そしてあなたに適したドライバーを見つけてください。
- お近くの開発マシンにChrome28 +がインストールされています。
- ローカル開発マシンにADBChrome拡張機能がインストールされていることを確認してください。 からインストールできます ここから.
このチュートリアルでは、ローカル開発マシンでSony Xperia L（Androidデバイス）とWindows7を使用します。 それでは、リモートデバッグから始めましょう。
1.まず、Androidデバイスでデバッグモードが有効になっていることを確認します
有効にしていない場合は、以下を参照してください。
- Android 4.2のユーザーについては、以下を参照してください。 http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
- それらの残りは参照することができます： http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.
開発用のAndroidデバイスのセットアップの詳細については、以下を参照してください。 http://developer.android.com/tools/device.html#setting-up.
2.Androidデバイスを接続します
次に、Androidデバイスをローカル開発マシンにUSBケーブルで接続します。 Androidデバイスを接続したら、AndroidでChromeを起動して、携帯電話でUSB Webデバッグを有効にする必要があります。次に、-> [設定]-> [開発者ツール]-> [USBWebデバッグを有効にする]を選択します。
開発マシンとの接続を確認するように求められた場合にこのオプションを選択するときは、[OK]を選択します。
3.デバッグ
ADB拡張機能をインストールすると、Chromeメニューの横に灰色のAndroidアイコンが表示されます。 次に、Androidアイコンをクリックして、-> [ADBの開始]を選択します。 これで緑色に変わり、現在接続されているデバイスの数が表示されます。 次に、アイコンをクリックして、-> [検査対象の表示]を選択します。 これにより、新しいタブが開き、接続されているAndroidデバイスの数と現在開いているタブが表示されます。
次に、デバッグするタブをリストから選択します。 これにより、開発ツールで新しいウィンドウが開きます。
ここで、ページからいくつかの要素を検査すると、その要素がChromeモバイルでリアルタイムで強調表示されます。
このようにして、開発ツールからデバッグすることにより、デバイス固有のバグを修正できます。 Chromeモバイルで実行される開発ツールからコマンドを実行できます。 また、ネットワーク、リソース、タイムライン、プロファイル、監査などのさまざまなパネルを表示します。
これで、モバイル固有のバグを修正し、アプリをサーバーにデプロイしてから携帯電話からアクセスしてデバッグする代わりに、モバイルアプリをリアルタイムでデバッグできます。 Google Chrome Devは、デバイス互換アプリを構築する開発者向けに、実際の問題を解決するこれらのツールを提供します。
ペドロミゲル
ChromeDevについて知ってうれしいです。 ブラウザとモバイル（iOSとAndroid）の両方の開発者へのプラットフォームの提供は日々増加しています。 デバッグプロセスに関するすべての詳細な写真をありがとう。
ミートゥ
これは本当に素晴らしくて便利な投稿です。 ここから、AndroidでのWebアプリのリモートデバッグに関する明確な手順を理解できます。 また、写真はChromeDevに関する手順を明確かつ簡単な方法で説明しています。
ヴァンワイルダー
うわー！ Androidは素晴らしい！
それが可能かどうかさえ知りませんでした
スティーブン
これはすべてのAndroidユーザーにとって本当に便利な投稿だと思います。 特に当時は、ブラウザ用のアプリが多く、ユーザーを混乱させていました。
すべての写真は非常に詳細で、すべての手順を簡単に実行できます。
あなたの共有をありがとう。
ステファン・ウー
サティシュ
本当にこの投稿は、AndroidでWebアプリをデバッグするのに非常に役立ちます。 それについて考えていません。
カレン・デイビッドソン
これは非常に有益な投稿です。 これで、AndroidでWebアプリをリモートでデバッグできます。
ジェームススティーブンス
非常によく提示された、有益な投稿。 Webアプリをリモートでデバッグする方法をいつも考えていましたが、過去に読んだ他のブログはそれほど単純ではありませんでした。 技術用語に従うのに苦労している私たちのために、それを明確な言葉で表現してくれてありがとう。
ステファンが言ったように、画像は非常に詳細であり、指示に従うのが簡単です。
ピーター·フォード
私は自分のSamsungGalaxyS3をデバッグする方法を探していました。 あなたのチュートリアルが本当に役に立ち、デバイスのデバッグに成功したので、私は正しい場所に来たと思います。 助けてくれてありがとう。
マヘシュ・スリバスタヴァ
うわー！ 私のAndroid携帯でこれができるとは知りませんでした。
ありがとうございます！
ベサニー
本当に驚くべきことに、特にAndroidアプリの場合、デバッグをリモートで実行できるとは思いもしませんでした…
アリシア
こんにちは、
おかげで、ついに私はリモートでデバッグを行いました、本当に役に立ちました。