デスクトップ環境で実行している Google Chrome に Firefox 開発ツールを接続する方法を説明します。
本機能のサポート状況は、Firefox のデバッグプロトコルと Chrome のデバッグプロトコルの橋渡しを行う Valence アドオンに依存します。Valence のサポート状況は、まだ初期段階です。
本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ必要な作業を、パート 2 "接続" ではデバイスへ接続するたびに必要な作業を扱います。
事前準備
以下のものが必要です:
- Valence アドオン (旧 Firefox ツールアダプタ) をインストールした、Firefox 35 以降。Firefox Developer Edition を使用している場合は、Valence はインストール済みです。他のエディションでは、最新バージョンの Valence をダウンロードして、XPI ファイルを Firefox で開いてインストールしてください。
- Chrome バージョン 37 以降。
接続
Chrome を実行する
デスクトップ版 を以下の特別なフラグ付きで起動して、リモートデバッグを有効にします。重要なフラグは --remote-debugging-port=9222 です。これらのフラグ付きで Chrome プロセスを実行する方法のガイドをご覧ください。
他にもいくつか便利かもしれないフラグがあります。--no-first-run、--no-default-browser-check、--user-data-dir 付きで実行すれば、他の Chrome プロファイルと同時に実行できます。
例えば OS X では以下のコマンドを実行すると、他のインスタンスとは分離されたかたちで、デバッグ可能な Chrome を起動できます:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')WebIDE を使用して接続する
Firefox で WebIDEを開きます。WebIDE で "ランタイムを選択" をクリックして、ドロップダウンメニューから "Chrome Desktop" を選択してください。
そして、WebIDE で "アプリを開く" をクリックしてください。ここに、デバイスで開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。ほとんどの Firefox 開発ツールを使用できます。ただし、以下のツールは未サポートです: