読者です 読者をやめる 読者になる 読者になる

Code Lab

CakePHP/Python/Swiftを勉強中... 好きなことで生きて行く!

【Cordova/PhoneGap】知らなかった... iOSのデバッグができるなんて!

CordovaでiOSアプリを作ってる時、console.log();をつかってもXcodeのログに表示されない!!
いらいらポイントだよね!

仕方ないから、cordova-plugin-consoleをつかってXcodeにログを表示してました...
ログ表示のためだけにプラグインとかちょっとめんどくさい...
Cordova、お前はこんなものか...って思ってました

見つけるまでの深い物語

そこで、出番ですよ Safari さん!!

fontを明朝体にするSafariさん!
お気に入りが見づらくて使わなくなったSafariさん!

Safariでデバッグしてみるかと、Cordovaの中のHTMLを開いて開発をおしてみたら...

あれ?わしのiPhoneが認識されとる...
むむ?アプリ名がでてきてる?

f:id:natuta:20170426093909p:plain


クリック...

f:id:natuta:20170426094006p:plain

で、でたぁぁぁぁあああああwwwww

ずっと探してたものがそこにあった!!

普通のブラウザの検証のように、CordovaのiOSアプリもデバッグすることができるようになりました!

んで、どうやるの?

webインスペクタをonにする

webインスペクタをonにすることで、ブラウザのデバックができるようになる!
便利だね!

「設定」から「Safari」へ進む

f:id:natuta:20170426101655j:plain

一番下にある「詳細」へ

f:id:natuta:20170426101823j:plain

「webインスペクタ」をonに

f:id:natuta:20170426101919j:plain
これで、iPhoneの設定は完了!
めちゃ簡単でしょ?

あとは見るだけ!

Safariを起動し、ツールバーの開発から自分のiPhoneを選択しデバッグしたい項目をクリック。

f:id:natuta:20170426093909p:plain

おわり!

f:id:natuta:20170426094006p:plain

おわりに

iOSアプリのデバッグにSafariが使えるとは思ってませんでした...

よくよく考えると、Androidはクロームを使ってwebページのデバッグができるからできるかもなーって予想はできるかもしれないけども...
できたとしてもwebページしかできないと思っていました。

Cordovaって、よく考えたらwebページだからできて当たり前って考えに全然行き着かなかった...

これで、少しは楽に作業できるな...