Skip to content

Remote Debug

Jump to bottom
Naoki Noguchi edited this page Jun 29, 2021 · 22 revisions

Amethyst でのリモートデバッグ

PC 側での事前準備

最新版 Firefox からでもリモートデバッグは可能だが、インスペクタなどいくつかの機能が動作しなくなるのでデバッグ対象とバージョンを合わせた Firefox ESR をセットアップします (ここでは仮に Firefox 78 ESR とします)。

  • Firefox ESR をインストール
    • デバッグ対象と同じメジャーバージョンの Firefox ESR を FTP サーバ からダウンロードします。ディレクトリ一覧の中で 78.10.0esr のように、末尾に esr が付いているものをダウンロードしてください。
    • ダウンロードした Firefox ESR を通常リリース版の Firefox とは別ディレクトリにインストールします (デフォルト設定でインストールすると通常の最新バージョン用の Firefox と同じディレクトリに上書きインストールされます)
  • デバッグ用のプロファイルを作成する
  • 自動更新を行わない設定にする
    • ユーザ設定はプロファイルディレクトリ 配下の prefs.js ファイル (Linux であれば ~/.mozilla/firefox/xxxxxxxx.fx78/prefs.js など) に設定します
    • prefs.js の末尾に次の行を追加してください: user_pref("app.update.auto", false);
    • この設定は設定画面 (about:preferences) で「Firefox の更新動作」を「更新の確認は行うが、インストールするかを選択する」に変更したり about:config から設定しても同じです。但し、起動後速やかに行わないと新しいバージョンの確認と自動ダウンロードが始まってしまうので注意してください (その場合インストールし直しです)
  • デバッグ用プロファイルで Firefox 78 ESR を起動する
    • プロファイルマネージャ を起動するか、コマンドライン引数でプロファイル名まで指定してデバッグ専用プロファイルで Firefox 78 ESR を起動する
  • リモートデバッグを有効にします
    • F12 キーで開発ツールを表示、右上の「･･･」から設定を開き、右下の詳細設定「リモートデバッガーを有効化」をオンにする
    • あるいは高度な設定画面 (about:config) を開いて devtools.debugger.remote-enabled を true にする
    • Firefox 68 ESR の場合は「ウェブ開発」メニューの下に「接続...」が追加されることを確認できたら準備完了です
      78はUIが変更されており、「接続･･･」が表示されない

開発ボード側での事前準備

  • リモートデバッグ設定を変更する
    • コンソールから firefox about:config のように起動して高度な設定画面を開き、devtools.debugger.force-local と devtools.debugger.prompt-connection の値を false に設定します。
    • あるいはプロファイルディレクトリ (/home/root/.mozilla/firefox/xxxxxxxx.default/ や /home/root/.renesas/webviewer/xxxxxxxx.default/ など) の prefs.js をエディタで開いて次の設定値を書き込んでください。 
      // ネットワーク越しのリモートデバッグを許可
user_pref("devtools.debugger.force-local", false);
// リモートデバッガのアタッチ時に確認ダイアログを表示しない
user_pref("devtools.debugger.prompt-connection", false);
  • 開発ボード側の IP アドレスを ip addr コマンドなどで確認してメモしておく

リモートデバッグ手順 (Firefox 78 ESR)

  • 開発ボード側を firefox --start-debugger-server のように引数を付けてデバッガサーバを有効化して起動します
    • ウィンドウが開く前にコンソールに Started debugger server on 6000 と表示されます
    • このメッセージが表示されない場合は prefs.js の設定やコマンドライン引数を再確認してください
    • URL を指定して開きたい場合は firefox http://example.jp/ --start-debugger-server のようにコマンドラインで URL を指定してください
  • PC 側の Firefox 78 をデバッグ用プロファイルで起動し、「ウェブ開発」 ⇒ 「リモートデバッグ」メニューを開く
    • ネットワーク上の場所の「ホスト」に実機の IP アドレスとポート 6000 (デフォルト) を入力して「追加」ボタンをクリック
    • 画面左側のリストに先程追加したIPアドレスとポートが表示される。「接続」ボタンをクリック
  • 「プロセス」の「メインプロセス」を選択して調査
  • コンソールタブを選択し、「出力を絞り込み」バーや「永続ログ」ボタンが表示されることを確認
    • リモートデバッグは安定性が不十分で、何らかの問題で正常接続されない場合にこれらのメニューが表示されないことがあります
  • インスペクターやデバッガータブに接続して数秒後に DOM やソースが表示されることを確認します
    • 暫く待っても表示されない場合、リモートデバッグ接続に何らかの問題がある場合があります。PC 側の Firefox を一度終了させてから再度接続してみてください。
  • お疲れ様！ 以降は PC の Firefox で普段デバッグしているときと同様にデバッグできます！

リモートデバッグ手順 (Firefox 68 ESR)

  • 開発ボード側を firefox --start-debugger-server のように引数を付けてデバッガサーバを有効化して起動します
    • ウィンドウが開く前にコンソールに Started debugger server on 6000 と表示されます
    • このメッセージが表示されない場合は prefs.js の設定やコマンドライン引数を再確認してください
    • URL を指定して開きたい場合は firefox http://example.jp/ --start-debugger-server のようにコマンドラインで URL を指定してください
  • PC 側の Firefox 78 をデバッグ用プロファイルで起動し、「ウェブ開発」 ⇒ 「接続...」メニューを開く
    • 「ホスト」に実機の IP アドレスを、「ポート」には 6000 (デフォルト) を設定して「接続」ボタンをクリック
  • 「利用可能なリモートのプロセス」の「メインプロセス」を選択して接続
  • コンソールタブを選択し、「出力を絞り込み」バーや「永続ログ」ボタンが表示されることを確認
    • リモートデバッグは安定性が不十分で、何らかの問題で正常接続されない場合にこれらのメニューが表示されないことがあります
  • リモートデバッグウィンドウが開いたら右上のデバッグ対象フレーム選択ボタンをクリックし、 chrome://browser/content/browser.xul (ブラウザコンテキスト) となっているものを現在 Firefox や WebViewer で開いている URL (コンテンツコンテキスト) に切り替える
    • 切替前に右上の「永続ログ」にチェックを入れている場合、数秒後に https://example.com/ に移動しました と表示されます。永続ログをオフにしている場合、コンテキスト切替時にコンソールがクリアされます。
  • インスペクターやデバッガータブに接続して数秒後に DOM やソースが表示されることを確認します
    • 暫く待っても表示されない場合、リモートデバッグ接続に何らかの問題がある場合があります。PC 側の Firefox を一度終了させてから再度接続してみてください。
  • お疲れ様！ 以降は PC の Firefox で普段デバッグしているときと同様にデバッグできます！

リファレンス

メモ

更新の確認まで停止する設定 (app.update.enabled) は Firefox 63 で廃止された ため Firefox 62 以降で導入された グループポリシーによる設定 で対応する必要がある。一般には更新の確認まで止める必要はないため、自動インストールまで行わないよう設定する上記手順だけで十分です。

Clone this wiki locally