PhoneGap のデバッグに救世主！ iOS6 Webインスペクタで実機上 JavaScript をステップ実行

数日間 PhoneGap をいじってみて、「JavaScript のデバッグが厄介だなぁ」と感じ始めた。
いろいろと情報を漁ったところ、iOS6 + Mac Safari6 で JavaScript のデバッグ実行という方法にたどり着いた。

この方法では、iOS6 の Webインスペクタの機能と、Mac 上の Safari6 を連携する。
そして、Mac から iPhone 実機の JavaScript をリモートデバッグする。
これで原始的な printf デバッグに頼る JavaScript 開発に劇的な効率化をもたらす。

それでは、早速使ってみよう。

用意するもの
1. iPhone(iOS6) または iPhone Simulator
2. Mac + Safari6
3. Dock ケーブル(実機の場合)
上記の他に、Xcode も必要ですよ。

デバッグの流れ
1. iPhone Safari の Webインスペクタを使用可能にする
2. Mac とiPhone を Dock ケーブルで接続する
3. Mac Safari から、2で接続した iPhone をリモートデバッグ
では、順を追ってみて行こう。

1. iPhone Safari の Webインスペクタを使用可能にする
iPhone の設定メニューから、Safari 詳細 画面を開く。

2. Mac とiPhone を Dock ケーブルで接続する

3. Mac Safari から、2で接続した iPhone をリモートデバッグ
Safari の「開発」メニューに対象の iPhone が表示される。
これを選択して、Webインスペクタで確認したいドキュメントを選択する。

これで Mac Safari と iPhone の PhoneGap アプリが繋がる。

行番号をクリックすると、ブレークポイントを貼ることができる。
F6 で Step Over。

これで厄介な JavaScript デバッグに劇的な効率が期待できる。