Skip to content

Remote Debug

Jump to bottom
Kohei Watanabe edited this page Jun 26, 2019 · 22 revisions

Amethyst でのリモートデバッグ

ボード側での事前準備

コンソールから firefox about:config のように起動して内部設定編集画面を開くか、プロファイルディレクトリ (/home/root/.renesas electronics corporation/webviewer/xxxxxxxx.default/ など) の prefs.js をエディタで開いて次の設定値を書き込んでください。

// ネットワーク越しのリモートデバッグを許可
user_pref("devtools.debugger.force-local", false);
// リモートデバッガのアタッチ時に確認ダイアログを表示しない
user_pref("devtools.debugger.prompt-connection", false);

プロファイルディレクトリ

プロファイルディレクトリのパス名にはブランディング名が含まれます。 例えば、 ${HOME}/.renesas electronics corporation/webviewer/ は、通常の Firefox の ${HOME}/.mozilla/firefox/ に相当します。

PC 側での事前準備

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

  • 開発環境の OS に応じた Firefox 60 を FTP サーバ からダウンロードして通常 Firefox とは別ディレクトリにインストールする (デフォルト設定でインストールすると通常の最新バージョン用の Firefox を上書きインストールしないように注意)
  • Firefox のプロファイルマネージャ でデバッグ専用プロファイルを (fx60 など適当な名前で) 作成する
  • Firefox 60 をプロファイルマネージャからまたはコマンドライン引数でプロファイルを指定してデバッグ専用プロファイルで起動する
  • 起動後速やかに設定画面 (about:preferences) で「Firefox の更新動作」を「更新の確認は行わない (非推奨)」に変更する
    • デフォルト設定では勝手にバージョンアップしてしまうので
  • リモートデバッグを有効にします
    • F12 キーで開発ツールを表示、右上の歯車アイコンで設定画面を表示、右下の「リモートデバッガーを有効化」をオンにする
    • これで設定としては devtools.debugger.remote-enabled が true になる
  • 「ウェブ開発」メニューの下に「接続...」が追加されることを確認

デバッグ手順

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

リファレンス

Clone this wiki locally