モバイルデバイスでのデバッグ

iOS デバッグの最小要件

• Mac macOSで動作するSafariバージョン6以降
• iOS6+搭載のiPhoneかiPad

Safari リモートデバッグを使用する

アップルの iOS 6 アップデートでは Safari リモートデバッグが導入されました。これにより、iOS デバイス上の Safari アプリでウェブページをデバッグできます。開始するには、次の手順に従います。

1. USBケーブルでiOSデバイスをマシンに接続します。
2. デバイスで、 [設定]アプリを開きます。Safari を選択し、ページの一番下までスクロールして、詳細メニューを開きます。[ Web インスペクタ ] オプションを有効にします。

   

3. デバイス上でも Safariアプリを開き、任意のウェブページを参照します。
4. Mac で Safari を起動し、[ 環境設定] ( Safari > [環境設定] ) を開き、[ 詳細設定] に移動します。セクション。メニューバーに [ 現像メニューを表示]オプションを有効にします。

   

5. を開きます発展メニュー。iOS デバイスがリストに表示されます。デバイス名の上にマウスを置くと、デバイス上で閲覧したサイトの URL が表示されます。

   

6. URL を選択すると、 Webインスペクタウィンドウが開き、デスクトップからモバイルブラウザでコンテンツをプレビュー、検査、デバッグできます。

   

7. [ リソース ] セクションでは、Web ページをプレビューして検査できます。Web インスペクタで要素の上にカーソルを置くと、iOS デバイスのブラウザで対応する要素がハイライトされます。

   

8. また、[ デバッガ]セクションと [ コンソール]セクションを使用して、ブレークポイントを設定したり、データをログに記録したりして、ページをさらにデバッグすることもできます。

Androidデバッグの最小要件

• Chrome 32+はMacかWindowsで動作している
• アンドロイド32+用のクローム付きAndroidデバイス

注:このセクションの手順は、Android 4.3を実行しているデバイスを使用して作成されました。

デバイスでのデバッグの有効化

デバイスでコンテンツのデバッグを開始する前に、デバイス設定で USB デバッグを有効にする必要があります。

1. Android 4.2以降を実行している場合は、デバイスのを有効にする必要があります開発者向けオプション USBデバッグをオンにする前に。デバイスで [ 設定]アプリを開き、[ 電話について]メニューを選択します。デバイスのビルド番号を見つけて 7 回タップします。
2. お使いのデバイスをヒット戻るボタンをクリックすると、開発者向けオプション設定にリストされているメニュー。

   

3. [ 開発者オプション ] メニューを開き、チェックボックスをオンにして USB デバッグを有効にします。

   

Android用のChromeを使用したリモートデバッグ

端末で USB デバッグが有効になったので、Chrome でリモートデバッグを開始するには、次の手順に従います。

1. コンピュータで Chromeを起動し、about:inspectを参照します。[ デバイス]ページで、[USB デバイスの検出 ] オプションを有効にします。

   

2. USBケーブルでデバイスをマシンに接続します。デバイスでは、USBデバッグを許可するかどうかを尋ねるダイアログが表示されます。［OK］を選択して、コンピュータとデバイスへの接続を許可します。

   

3. デバイスで Chromeアプリを開き、Web ページを参照します。
4. 戻るクロムお使いのコンピュータで。about:inspectページに、接続されているデバイスが表示されます。端末名の下に、端末の Chrome で開いているすべてのページの一覧が表示されます。

   

5. Web ページのデバッグを開始するには、ページ URL の下にある検査リンクを選択します。Chromeの開発ツールが開きます。

   

6. の左側に要素タブで、デバイスアイコンを選択して、DevToolのスクリーンキャスト機能を開くことができます。これにより、モバイルデバイスに表示されるコンテンツのライブプレビューを開くことができます。スクリーンキャストを使用してデバイスを操作する方法の詳細については、 Google のドキュメントを参照してください。

チャールズの最低要件

• チャールズは、Windows、Mac、Linuxと互換性があります
• iOSおよび/またはAndroidデバイス

マシンにチャールズをセットアップする

チャールズをマシンで実行するには、以下の手順に従ってください。

1. Charlesをマシンにダウンロードしてインストールします。
2. コンピュータで Charles を実行します。メニューから、プロキシ > プロキシ設定を選択します。ポートが割り当てられ（8888 など）、トランスペアレントHTTPプロキシの有効化オプションが選択されていることを確認します。

   

3. 「OK」を選択して変更を保存し、ダイアログを閉じます。
4. メニューから、プロキシ > SSL プロキシ設定を選択します。[SSL プロキシを有効にする ] オプションが選択されていることを確認します。

   

5. [ 場所]セクションで、[ 追加]ボタンを選択します。の中に場所の編集ダイアログで、に移動します港フィールドに入力して入力します443。OKを選択して、この変更を保存します。

   

6. 「OK」を選択して「場所の編集」ダイアログを閉じます。

   

7. OKを選択して SSLプロキシ設定ダイアログを終了します。
8. [ ヘルプ] > [SSL プロキシーイング] > [Charles ルート証明書をモバイルデバイスまたはリモートブラウザにインストールする] に移動します。

   

9. デバイスのセットアップに使用するローカルサーバ IP およびポート番号（8888）を識別するメッセージが表示されます。また、証明書をダウンロードしてインストールする URL も表示されます。後で使用するために、これらのファイルをコンピュータにコピーします。

   

デバイスにチャールズを設定する

このセクションでは、コンピュータ上でCharlesと連携するようにiOSおよび/またはAndroidデバイスをセットアップする方法を学びます。

iOS デバイスをセットアップする

1. デバイスで、コンピュータと同じネットワークに接続されていることを確認します。これを確認するには、 [設定] > [Wifi ] に移動し、ネットワーク名を選択して詳細オプションを表示します。

   

2. 下部の [HTTP] セクションで、[ 手動モード] を選択します。次に、前の手順で Charles からコピーしたサーバー IP とポート番号 (8888) を追加します。

   

3. デバイスで、ブラウザを開き、 http://www.charlesproxy.com/getssl に移動します。デバイス設定にリダイレクトされ、 Charles Proxyカスタムルート証明書プロファイルをインストールするように求められます。[ インストール]ボタンを選択して、Charles 証明書をデバイスにインストールします。

   

4. Charles 証明書をインストールするには、手順に従います。完了したら、[ 完了] を選択します。

   

5. 次に、デバイスが Charles 証明書を信頼していることを確認する準備が整いました。デバイスで、[ 全般] > [バージョン情報] > [証明書の信頼設定] に移動します。ここでは、チャールズプロキシ証明書を見つける必要があります。

   

6. チャールズ証明書を有効にします。警告メッセージに注意してください。Charles でデバッグしないときは、この証明書を無効にすることができます。

   

7. これで、チャールズで送受信されたデータを見ることができます。

   

Android デバイスをセットアップする

1. デバイスで、ブラウザを開き、 //chls.pro/ssl に移動します。
2. [ 証明書名 ] ダイアログが表示されます。証明書の名前を指定し、[ 使用先] フィールドを Wi-Fi に設定します。［OK］を選択して証明書をインストールします。

   

3. 次に、 [設定] > [Wi-Fi ] メニューを開きます。デバイス上で接続したネットワークの一覧が表示されます。現在接続しているワイヤレスネットワークを選択します。このネットワークは、コンピュータ上で接続しているネットワークと一致する必要があります。
4. これにより、[編集]、[表示]、または [忘れる] の 3 つのオプションを含む小さなダイアログが開きます。[ 編集] を選択します。
5. このダイアログで、下にスクロールして、[ 詳細オプションを表示]フィールドを有効にします。これにより、プロキシと IP の設定が表示されます。

   

6. [ プロキシ設定]フィールドを [ 手動] に変更します。
7. [ プロキシホスト名 ] フィールドにコンピュータの IP アドレスと、Charles で設定されたポートと一致する [ プロキシポート ] フィールドに入力します (デフォルトでは、ポートは 8888 に設定されています)。[保存] を選択します。

   

8. デバイスのデフォルトのブラウザで、Web サイトに移動します。チャールズで送受信されたデータを見ることができます。