iOS シミュレータで動作させている Cordova アプリを Safari の Web インスペクタでデバッグする

iOS シミュレータで動作させている Cordova アプリを Safari の Web インスペクタで参照する方法を紹介する。

環境は以下のとおり。

Cordova アプリの構築までの手順は以下。

まず、Safari を開き、Safari メニュー → 環境設定 → 詳細タブ → 最下部の「メニューバーに "開発" メニューを表示」をチェックし、メニューに「開発」メニューを出すように設定する。

次に、cordova emulate などで iOS シミュレータを立ち上げておく。

アプリが立ち上がったら、Safari の「開発」メニューに「Simulator」という項目が増える。ココから「アプリ名」を選ぶと Web インスペクタが確認できる。

Web インスペクタからブレークポイントを設定したり、キャッチしきれない例外で止めたりできる。また、console.log() なんかもココに出力されるので、動作確認も容易だ。