[Cordova/PhoneGap]ネイティブな部品を使うプラグインのデバッグ方法について

CordovaのGoogle Maps Pluginを使ったアプリケーションを開発しています。

※開発環境(主にMacで開発しています。)
Mac : Sublime Text
Win : Dream Weaver cs6 または、Sublime Text

これまではHTMLだけで完結するようなCordovaアプリを作っていたので、デバッグはChromeのDeveloper Tool上でHTMLファイルを表示して行っていました。

しかし、このプラグインは、地図を表示する際にネイティブの機能を使用しているため、Chromeを使用したデバッグができません。

現在、動きが怪しい箇所があればAlertで変数の表示するようにしてビルド→実行という流れを繰り返しており、非常に開発の効率が悪いです（あと、なんかダサいです・・・）。

Cordovaアプリを作成する際に使用する効率のよいデバッグ手法があれば、ご教示ください。

■Google Mapを表示するコードの例

html
1<!-- 省略 -->
2<body>
3  <div id="map"></div>
4</body>
5<!-- 省略 -->

javascript
1function onDeviceReady(){
2	//Mapの生成
3	var mapDiv = document.getElementById("map");
4	map = plugin.google.maps.Map.getMap(mapDiv,{
5		'camera': {
6			'latLng': new plugin.google.maps.LatLng(getIdo(),getKeido()),
7			'zoom' : 17
8		}
9	});
10	map.on(plugin.google.maps.event.MAP_READY, onMapInit);
11}
12
13//Map初期化時のイベント
14function onMapInit(map_args) {
15	map.getMyLocation();
16	//クリックイベント定義
17	var clickEvent = plugin.google.maps.event.MAP_CLICK;
18	map.on(clickEvent, function(_latlng){
19		alert("クリックイベント発火！");
20		//★★例えば、ここで何かしら挙動がおかしい場合は、
21		//ステップ実行して流れを追いたい。
22	});
23}
24

kei344

2016/05/08 15:45

まだ質問が「受付中」になっていますが、いったんご自身の回答をベストアンサーに選び、「解決済」にされてはいかがでしょうか。

tamogi

2016/05/09 03:06

連絡ありがとうございます。解決済みにしました。

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。以下の方法で非常に簡単にできるそうです（汗
・Debugging iOS PhoneGap Apps with Safari's Web Inspector
・ハイブリッドモバイルアプリのデバッグ(iOS)

やり方としては、以下の通りとなります。
※設定方法の詳細については、上記リンクのスクショを参考にして下さい。そんな難しくないです。
1.[iPhone]Safaiのプライベートブラウジングを無効化（実機デバッグ時のみ）
2.[iPhone]SafaiのWEBインスペクタを有効化（実機デバッグ時のみ）
3.[Mac]Safariの「開発」メニューを表示する
4.[Mac]CordovaApp>platforms>ios>[AppName].xcodeprojファイルをXcodeで開く
5.[Mac]実機orシミュレーションでデバッグ実行する
6.[Mac]Safariの開発タブ>Simulator(実機の場合は端末名)>index.html から、デバッグ実行可能

投稿2016/05/06 12:30

tamogi

総合スコア72