簡単お手軽なionicデバッグを覚えて開発効率UPしよう

ionicハイブリッドアプリ開発 ionic
ionicハイブリッドアプリ開発

ionicのデバッグについて

実機に依存しない機能であれば、ブラウザからデバッグができます。
Google Chromeが一番使いやすくておすすめですが、FireFoxやsafariでも同様の機能があります。
IE11でもデバッグできますが・・・・個人的にIEは大嫌いなので非推奨です。Web制作者泣かせのIEは滅びるべきです。

Google Chromeでデバッグしよう

ここではGoogle Chromeを基準にします。
さて、Goole Chromeを起動後、Macであれば、Option + Command + iを押すとデバッグ機能が表示されます

chrmeデバッグ画面

consoleに出力したいメッセージは、ソース中に

console.log("これはコンソールに出力されるメッセージです");
$log.info("デバッグ中です"); // $logの依存注入してつかってください。

といった形で、ログが出力できます。いわゆるprintfデバッグですね。

その他にも、localStorageやwebSqlの値をチェックしたり、ブレークポイントを設定して、
プログラムを停止しながら流れを追うことができます。
サーバとの通信も様々な情報が見れます。headerにどんな情報があるのか、PHPから帰ってくるデータの内容など様々な情報を読み取る
ことができます。

iPhoneシミュレータデバッグ

シミュレータを使ったデバッグでは、iOSの場合、コンソールを表示して行っています。
シミュレータ上で、Command+/を押下すると、出てきます。
ここにも、

console.log("これはコンソールに出力されるメッセージです");

で設定したログが表示されます。

Androidデバッグ

Androidの場合、シミュレータが重いので、私は実機でデバッグしています。
Androidの実機デバッグは、色々やり方があるようですが、私はGoogle Chromeを使っています。
Android実機のデバッグには、Google Chromeのアドレスバーに
chrome://inspect/
と打ち込みます。
その状態で、コマンドラインから
ionic run android
と入力すれば、Android実機にプログラムがロードされます。

ロードされると、Google Chrome上のページに
WebView in パッケージ名 が表示されるので、inspectボタンを押すと、
実機で動いているプログラムのログとかが見れます。

お手軽かんたん便利でおすすめです