Safariでiosシミュレータのデバッグ

Safariでiosシミュレータのデバッグ

iOSシミュレータで起動しているアプリのデバッグをするときの方法。

Cordovaでハイブリッドアプリ開発をするときに、iOSシミュレータで動くアプリのデバッグをしたい時がある。
その方法。<手順>
1.iOSシミュレータの起動
2.Safariの設定変更
3.Webインスペクタの起動
4.デバッグ

iOSシミュレータの起動

まず、iosシミュレータでデバッグしたいアプリを起動しておく。
Cordovaアプリの場合はプロジェクト(例えば,testProjectだとして)に移動して、iosシミュレータ起動

$ cd testProject

$ cordova emulate ios

これで起動する。

Safariの設定変更

デバッグするために、「開発メニュー」をメニューバーに表示させる。

Safari > 環境設定 > 詳細で「メニューバーに”開発”メニューを表示」にチェックを入れる。

Webインスペクタの起動

ここまでで、Safariのメニューバーに「開発」が表示されたので、Webインスペクタを起動する。

開発 > Simlatorでデバッグしたいアプリ（ここではindex.html）を選択。

デバッグ

あとはbreakpointとかを設定してデバッグするだけ。