Valence (Firefox ツールアダプタ)

Valence (旧名 Firefox ツールアダプタ) は、Gecko ベースの Firefox、Android 版 Firefox、Firefox OS ブラウザに限らず、様々なブラウザを Firefox 開発者ツールでデバッグできるようにする実験的なアドオンです。

初期のデバッグ対象は Android 版 Chrome、デスクトップ版 Chrome と iOS 版 Safari です。

Valence はまだ初期段階にあり、プレビューとしてのみ公開されています。今のところ、日常的な開発作業に使用することは推奨されません。

インストールと設定

Valence のインストール

Firefox Developer Edition (すべてのバージョン) または Firefox 37 以降 (すべてのチャンネル) を使う場合、WebIDE を開くと Valence もインストールされますので、この項目は飛ばして読み進めてください。

そうでなければ、お使いの OS 向けの Valence 最新版をここからインストールしてください。

注記: WebIDE でデバッグ対象が表示されない場合は、Valence アドオンが無効化されていないか確認してください。これはアドオンマネージャの拡張機能セクションで確認できます。

Android 版 Chrome の設定

Valence を使うには Chrome 37.0 以上が必要です (Chrome と Chrome ベータ版の両方がインストールされていて、Firefox 開発者ツールを端末へ接続する際にどちらも実行されていた場合、片方のブラウザのタブのみ表示されます)。

お使いの端末で USB デバッグと併せて開発者モードを有効にする必要があります。ここに書かれている手順に従って開発者モードを有効にしてください。

iOS 版 Safari、Firefox、その他の WebView の設定

Valence は iOS 6、7、8 上の Safari、および OS X の iOS シミュレータ向けに開発されています。また同じコードで iOS 版 Firefox や、iOS および iOS シミュレータの組み込み WebView でのデバッグもサポートします。

お使いの端末で開発者サポートを有効にする必要があります。このページにある手順 (「To enable Web Inspector on iOS」というセクション) に従って有効にしてください。

iOS 対応には Google の ios-webkit-debug-proxy、および Windows では fork である ios-webkit-debug-proxy-win32 を使用しています。Mac、Linux、Windows Vista 以降では、特に何もする必要はありません。Valence がプロキシを同梱、管理します。Windows XP では、アドオンをインストールする前に Microsoft の PowerShell をダウンロードしてください。Windows では、初めてプロキシを起動するときにファイアウォールの確認ダイアログが表示されます。"アクセスを許可する" ボタンをクリックしてください。Windows では iTunes がデバイスドライバをインストールしますので、iTunes をインストールしなければならないでしょう。または、少なくとも iTunes に含まれる Apple Mobile Device Support および Apple Application Support が必要です。

デスクトップ版 Chrome の設定

Valence を使うには Chrome 37.0 以上が必要です。また、デスクトップ版 Chrome ではリモートデバッグが初期設定で有効となっていないため、特別なフラグ付きで起動する必要があります。

重要なフラグは --remote-debugging-port=9222 です。これらのフラグ付きで Chrome プロセスを実行する方法についての情報が書かれたページがあります。

別の Chrome プロファイルと同時に Valence を起動したい場合は、他にもいくつか便利かもしれないフラグがあります。--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')

ツールバーボタンをクリックして何も起こらない場合、おそらくポート 9222 上で何も実行されていない可能性があります。何が問題となっているか、ブラウザコンソールのページで確認してください。

Valence の実行

Valence は、Firefox OS への接続に既に使用されている WebIDE ウィンドウへ追加することで機能します。

端末を接続: お手持ちの端末を接続し、ブラウザを起動してデバッグしたいページを開きます。OS X をお使いで Xcode をインストールしているなら iOS シミュレータを使うこともできます。
WebIDE を起動: Firefox の Web 開発者メニューから WebIDE を起動します。
ランタイムを選択: ツールバー右端のランタイム一覧を開きます。「カスタム」セクション以下から「iOS 版 Safari」もしくは「デスクトップ版 Chrome」を選択します。Android 端末に関しては、「USB 端末」セクションにある「Android 版 Chrome」を選択します。端末からのデバッグ接続を許可する必要があるかもしれません。
タブを選択: ツールバー左端のアプリケーション一覧からデバッグしたいタブを選択します。
デバッグを開始: デバッグボタン (一時停止のようなアイコン) をクリックして Firefox 開発者ツールを接続します。

フィードバックをお寄せください: 何か問題に遭遇したら報告をお願いします。valence GitHub プロジェクトのイシュートラッカーを使ってください。追加を予定している機能は多数あり、あなたのフィードバックはどの部分に優先的に取り組むべきかの判断材料となります！

FAQ

バックエンドの仕組みは？

このアドオンは Firefox 開発者ツールプロトコルの新実装です。直接コンテンツへ接続する代わりに、Chrome や iOS が提供しているリモートデバッグプロトコルと対話します。この実装は Firefox のプロセス内部でホストされており、Firefox 開発者ツールによって内部的に使用されています。

いつ正式公開となりますか？

まだ分かりません！開発には一生懸命取り組んでおり、進捗状況を皆さんに見せたかったのです。日常的な開発作業に使える状態になったと自信を持って言える段階になったら一般に公開します。当面はプレビュー版を定期的に更新していきます。

開発に貢献するには？

ソースコードに取り掛かるための説明が GitHub プロジェクトページにあります。あなたのフィードバックも役立ちます。Twitter の @FirefoxDevTools、GitHub イシュー、UserVoice で声を聞かせてください。

これは remotedebug.org と同じようなものですか？

いいえ。remotedebug.org プロジェクトの究極の目標は、Chromium が使用しているプロコトルのひとつを標準化することで、サードパーティーツールがすべてのブラウザと通信できるようにするための統一プロトコルを提供することです。私たちは統一プロトコルに取り組んでいるブラウザベンダーを知りません。

Valence では、今のところ標準プロトコルの問題を解決しようとはしておらず、私たちは Firefox 開発者ツールをそれらのブラウザへ提供するために必要なことをしているだけです。Valence は Chromium のプロトコルではなく Firefox 開発者ツールのプロトコルを基盤としています。

remotedebug.org のプロトコルブリッジの初期バージョンはこのプロジェクトに多少の影響を与えてくれましたが、そのアイデアを別の方向へ進めることにしました。

ダウンストリームのプロトコルは定期的に変更されませんか？

はい。そして私たちはそのことを素晴らしいと思っています。ベンダーの開発者ツールが急速に進化しているので、開発者機能と同じペースでプロトコルを拡張していきます。私たちは Valence をそれらのプロトコルの変更に追い付かせることに注力しています。これが、このツールを組み込みの機能ではなくアドオンとして公開しているひとつの理由です。私たちがアドオンを作るのと同じペースで開発者の皆さんにもプロトコルの新バージョンを採用して欲しいのです。

これは簡単な作業ではありませんが、その目標を維持するにあたって必要なことをしているかという点については十分に注意を払っています。

このプロトコルを自分自身で使って、自分のツールで複数のブラウザをターゲットとすることはできますか？

これは Valence の初期目標ではありませんが、もし多くの関心があれば検討したいと思います。ご連絡ください。

サポート

IRC 上の #devtools チャンネルを開いてください。手助けしたいと思います。