ionicのデバッグについて
実機に依存しない機能であれば、ブラウザからデバッグができます。
Google Chromeが一番使いやすくておすすめですが、FireFoxやsafariでも同様の機能があります。
IE11でもデバッグできますが・・・・個人的にIEは大嫌いなので非推奨です。Web制作者泣かせのIEは滅びるべきです。
Google Chromeでデバッグしよう
ここではGoogle Chromeを基準にします。
さて、Goole Chromeを起動後、Macであれば、Option + Command + iを押すとデバッグ機能が表示されます
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ボタンを押すと、
実機で動いているプログラムのログとかが見れます。
お手軽かんたん便利でおすすめです
