Remote debugging with Opera Dragonfly

はじめに / Introduction

Opera Dragonfly の画期的な特徴の一つに，リモートデバッグ機能がある．Opera Mobile 9.5 beta 1 と Dragonfly を用いると，普段の開発環境 ( PC )でモバイル向けのウェブページやウェブアプリのデバッグをすることができる．この記事では，モバイル機器のリモートデバッグの方法を示し，Opera Dragonfly の alpha 2 の新機能を紹介する．

リモートデバッグの設定 / Setting up remote debugging

リモートデバッグを行うには，Opera 9.5と Opera Mobile 9.5 beta 1 の動作する Windows Mobile 端末が必要だ．Opera 9.5 と Opera Mobile 9.5 beta 1 はどちらも無料でダウンロードできる. Windows Mobile 端末だけでなく， Opera 9.5 の動作する他の PCに対するリモートデバッグをも Dragonfly はサポートしているので，たとえば別の OS でのテストなど，別の環境に対するデバッグを行うのに最適である.

2つの Opera （ Opera 9.5 と Opera Mobile 9.5 beta 1 か 2台の Opera 9.5 ）をダウンロードしてインストールし，Opera 9.5 のメニューを「ツール → 詳細ツール → 開発者ツール」と辿り，Dragonfly を起動する．起動後，Dragonfly の画面の右下隅の “Configurations” のアイコンをクリックし，設定画面を出す. 図1 に示すように，”Remote Debug” のチェックボックスを有効にし，”Apply”ボタンをクリックする．この設定により，Dragonfly はリモートデバッグモードになるので，次にデバッグ対象のモバイル機器（もしくは他の Opera 9.5）へ接続するための設定を行う．

図 1: Opera Dragonfly を用いてリモートデバッグを行うために必要な設定．

Opera Mobile 9.5 beta 1 を起動し，アドレス欄に opera:debug と入力する．Dragonfly が動作している PC への接続の設定画面が表示される．ここで，Dragonfly の動作している PC の IP アドレスとポート番号（デフォルトでは 7001）を入力し “Connect”ボタンを押す．

自分の PC の IP アドレスを知るには，Mac や Linux の場合，ターミナルで ifconfig（訳注: Fedora などでは /sbin/ifconfig）として，active な接続の inetの値をみる．私（訳注: David Storey 氏）の場合，イーサネットを使っているので，media: autoselect (100baseTX <full-duplex,flow-control>） status: activeと表示されている接続の inetの値が適切な値である．もし，WiFi や Bluetooth など複数の接続がある場合，複数の値が表示されるので，図2において強調されているような適切な値を選ぶ必要がある．Windowsでは，コマンドプロンプトに ipconfig と入力し，IP Adress欄の値を使う．

Mac や Linux における IP アドレスの調査方法．必要な IP アドレスは inet の後ろに表示されている．図 2: Mac や Linux における IP アドレスの調査方法（実際の IP アドレスはセキュリティのためぼかしてある）．

すべての設定が正しく行われていると，接続先の IP アドレスとポート番号に対して接続したとのメッセージが表示される．モバイル端末でいい結果を得るには，Windows なら Active Sync かモバイル端末が対応しているなら WiFi 接続をお勧めする．

1つのセッションでは1つの接続のみが可能である．もし別のデバイスのデバッグに切り替えたいときは，一度接続を切る必要がある．Dragonfly は（セッションの）最初に接続したデバイスとだけ通信するからである．

気を付けなければならないこととして，接続が暗号化されてない点があげられる．そのため，firewallを超えて公衆回線を経由する接続をした時には，クレジットカード番号などの情報をやり取りしないようにする必要がある．

接続すると，図3に示すように，Dragonfly の Environment タブに接続先デバイスの情報と，実行中の Dragonlfy のバージョン情報が表示される．この図では Windows Mobile のリモートデバッグを行っているので，プラットフォームとして Opera Mobile 9.5 と表示されている．図 3: Windows Mobile プラットフォームに接続したときの Opera Dragonfly の Environment タブの表示．

モバイル向けページのデバッグ / Debugging your first mobile page

開発環境とモバイル端末は，Scope プロトコルを用いて通信を行う．Opera Mobile 9.5 beta 1 で新しいタブを開きデバッグを行うページの URLを入力する．ページが読み込まれると，Dragonfly の Script タブか，DOM タブのコンボボックスにページタイトルが表示されるので，それを選択することでデバッグを始められるようになる．

Dragonfly の DOM タブを開きデバッグ先ページの (X)HTML ファイルを選択すると，モバイル端末（デバッグされる側）で見ているページの DOM が表示される．このように同一の PCでのデバッグとまったく同様に行うことができる．

デバッグの一例として，Dragonfly alpha2 の新しい CSS 編集機能を試すことにする．Dragonfly の DOM タブで，たとえば，body要素などをクリックすると，モバイル端末側でその要素が表示されるようにスクロールがなされ，Dragonfly の右パネルにその要素の style 情報が表示される．たとえば，background-color を書き換えるには，それをクリックして値を書き換える．図4に示すような編集状態のとき，キーボードの上矢印キーか下矢印キーを押すことで設定可能な値が順次表示される．

図 4: Dragonfly における CSS 値のサイクル表示．

Dragonfly で値を変更しているとき，モバイル端末の画面を見ると body 要素の背景色がリアルタイムに変わって行く様子が見られる．

モバイル端末と Dragonfly を動かしている PCとの間のネットワークが遅いと多少のずれが生じることもある．別のプロパティfont-sizeなどを調整して，画面がリアルタイムに書き換わる様子を注目してみるといい．CSS の微調整は CSSのルールを変えたり増やしたりしたときに何が起こるかをテストするのに役に立つ．接続中は，ローカルマシンでのデバッグとまったく同様の操作が可能なため，すでに知っている Dragonfly の機能を試したり，dev.opera.com の Dragonfly の紹介記事Opera Dragonfly 入門（訳注:原典 introductory Opera Dragonfly ）の内容を試したりできる．

後始末する/ Wrapping up and disconnecting

デバッグが終了したら，接続を切って Dragonfly とモバイル端末の双方を通常モードに戻す必要がある．Opera Mobile 9.5 beta 1（デバッグされる側）で，opera:debugのページに戻り，”Disconnect”ボタンを押し，必要なければ Opera Mobile 自体も終了させる．Dragonlfy側をローカルデバッグモードに戻すには，”Settings”のダイアログを表示させて，”Remote Debug”のチェックを外して “Apply”を押す．

まとめ / Conclusion

この記事では，Opera Dragonfly と Opera Mobile 9.5 beta 1 を用いたリモートデバッグの設定方法を説明し，Opera Dragonfly alpha 2 の新しい CSS の編集機能について触れた．Opera Dragonfly を用いて対応するデバイスを通常の開発環境からデバッグする方法を理解してもらえたことでしょう．