ポート転送を使用すると、次のことができます。
- ケース 1. 別の Chrome インスタンスで開いたタブをデバッグする。
- ケース 2. 開発マシンのウェブサーバーでサイトをホストし、USB ケーブルで Android デバイスからコンテンツにアクセスします。
ケース 2 では、ポート転送は Android デバイスのリッスン TCP ポートを介して機能し、そのポートは開発マシンの TCP ポートにマッピングされます。ポート間のトラフィックは、Android デバイスと開発マシン間の USB 接続を介して転送されるため、接続がネットワーク設定に依存することはありません。
また、ウェブサーバーがカスタム ドメインを使用している場合は、カスタム ドメイン マッピングを使用して、そのドメインのコンテンツにアクセスできるように Android デバイスを設定できます。
ポート転送をセットアップする
状況に応じて、以下の手順を行います。
ケース 1: 別の Chrome インスタンスへのポート転送を設定する
次のように、
--remote-debugging-port=PORT
パラメータを指定して別の Chrome インスタンスを実行します。MacOS
open -a "Google Chrome" --args --remote-debugging-port=PORT
ウィンドウ
start chrome --remote-debugging-port=PORT
Linux
google-chrome --remote-debugging-port=PORT
デバッグに使用する Chrome インスタンスで以下を行います。
chrome://inspect/#devices
を開きます。- [ネットワーク ターゲットを検出する] がオンになっていることを確認します。
- チェックボックスの横にある [設定] をクリックします。
[ターゲット ディスカバリの設定] で「
localhost:PORT
」と入力し、 [ポート転送を有効にする] をオンにして、[完了] をクリックします。[デバイス] に戻ると、新しいリモート ターゲットが表示されます。デバッグするタブの横にある [inspect] をクリックします。
デバイスモードで新しい DevTools ウィンドウが開きます。上部のアドレスバーに、デバッグするウェブサイトのアドレスを入力します。
アドレスバーの横で入力方法を切り替えることができます。
ケース 2: Android デバイスで USB 経由でのポート転送を設定する
開発マシンと Android デバイス間のリモート デバッグを設定します。設定が完了したら、ご利用の Android デバイスがリストに表示されます。
[USB デバイスの検出] がオンになっていることを確認します。
チェックボックスの横にある [ポート転送] をクリックします。
[ポート転送設定] では、
localhost:8080
がデフォルトで設定されています。[ポート転送を有効にする] をオンにします。.
他のポートを設定する場合は、この手順を行います。それ以外の場合は、手順をスキップして [完了] をクリックします。
左側の [ポート] テキスト フィールドに、Android デバイスでサイトへのアクセスを許可するポート番号を入力します。たとえば、
localhost:5000
からサイトにアクセスする場合は、「5000
」と入力します。右側の [IP アドレスとポート] テキスト フィールドに、開発マシンのウェブサーバーでサイトを実行している IP アドレスまたはホスト名を入力し、その後にポート番号を入力します。たとえば、サイトを
localhost:5000
で実行している場合は、「localhost:5000
」と入力します。[完了] をクリックします。
これで、ポート転送が設定されました。デバイス名に加えて、ポート転送のステータス インジケーターが上部に表示されます。
内容を表示するには、Android デバイスで Chrome を開き、[デバイスポート] フィールドに指定した localhost
ポートに移動します。たとえば、フィールドに「5000
」と入力した場合は、localhost:5000
に移動します。
カスタム ローカル ドメインにマッピングする
カスタム ドメイン マッピングを使用すると、カスタム ドメインを使用している開発マシンのウェブサーバーから Android デバイス上のコンテンツを表示できます。
たとえば、許可リストに登録されたドメイン chrome.devtools
でのみ機能するサードパーティの JavaScript ライブラリをサイトで使用しているとします。そのため、開発マシンの hosts
ファイルにエントリを作成して、このドメインを localhost
(例: 127.0.0.1 chrome.devtools
)にマッピングします。カスタム ドメイン マッピングとポート転送を設定すると、Android デバイスで URL chrome.devtools
にアクセスして、サイトを表示できるようになります。
プロキシ サーバーへのポート転送を設定する
カスタム ドメインをマッピングするには、開発マシンでプロキシ サーバーを実行する必要があります。プロキシ サーバーの例としては、Charles、Squid、Fiddler があります。
プロキシへのポート転送を設定するには:
プロキシ サーバーを実行し、使用しているポートをメモします。
Android デバイスへのポート転送を設定します。[ローカル アドレス] フィールドに、「
localhost:
」の後にプロキシ サーバーが実行されているポートを入力します。たとえば、ポート8000
で実行されている場合は、「localhost:8000
」と入力します。[デバイスポート] フィールドに、Android デバイスでリッスンする番号(3333
など)を入力します。
デバイスでプロキシを設定する
次に、Android デバイスがプロキシ サーバーと通信するように設定する必要があります。
- Android デバイスで [設定] > [Wi-Fi] に移動します。
接続しているネットワークの名前を長押しします。
[ネットワークを変更] をタップします。
[詳細オプション] をタップします。プロキシ設定が表示されます。
[プロキシ] メニューをタップして [手動] を選択します。
[プロキシのホスト名] フィールドに「
localhost
」と入力します。[プロキシポート] フィールドに、前のセクションで [デバイスポート] に入力したポート番号を入力します。
[保存] をタップします。
このように設定することで、デバイスはすべてのリクエストを開発マシンのプロキシに転送します。プロキシはデバイスに代わってリクエストを行うため、カスタマイズしたローカル ドメインへのリクエストは適切に解決されます。
これで、開発マシンの場合と同様に、Android デバイスでもカスタム ドメインにアクセスできるようになりました。
ウェブサーバーが標準以外のポートで実行されている場合は、Android デバイスからコンテンツをリクエストする際に必ずポートを指定してください。たとえば、ウェブサーバーがポート 7331
でカスタム ドメイン chrome.devtools
を使用している場合、Android デバイスからサイトを表示する場合は、URL chrome.devtools:7331
を使用する必要があります。