Corredor

ウェブ、プログラミングの勉強メモ。

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

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

環境は以下のとおり。

  • MacOS Sierra
  • XCode v8.3.2
  • Node.js v6.10.3
  • npm v3.10.10
  • Cordova v7.0.1

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

neos21.hatenablog.com

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

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

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

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

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)

  • 作者: 大友聡之,坂手寛,清水崇之,城口良太,高木基成,床井幹人,野島祐慈,渡辺俊輔
  • 出版社/メーカー: 翔泳社
  • 発売日: 2013/03/12
  • メディア: 大型本
  • クリック: 1回
  • この商品を含むブログ (2件) を見る