The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

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

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

f:id:duo-taro100:20160218004611p:plain

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

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

iOSシミュレータの起動

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

$ cd testProject

$ cordova emulate ios

これで起動する。

Safariの設定変更

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

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

f:id:duo-taro100:20170827201707p:plain

Webインスペクタの起動

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

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

f:id:duo-taro100:20170827202044p:plain

デバッグ

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