IonicinoueIonicでモバイルアプリを作ろう!(12)デバッグをするこの記事は2017年6月30日に書かれたものです。内容が古い可能性がありますのでご注意ください。Tweetクロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。今回はデバッグの方法を紹介します。v2環境によるものです。デバッグIonicアプリは、ブラウザエンジンを内包しその上でWebページをレンダリングして実行するというハイブリッドアプリです。よってデバッグも通常のWebサイトと似たよう手法で行うことができます。Toolsを用いましょう。Toolsを起動します。Windowsの場合はF12、Macの場合はcommand+option+iがショートカットになります。上の画像で印をつけているアイコンをクリックすることで上のように表示領域をモバイルに合わせることが出来ます。コード中にconsole.log()を記述することで値をConsoleに出力することも可能です。通常のWebアプリとなんら変わらないですね。SourcesからTypeScriptのファイルを見ることが出来ます。このTypeScriptのビューア上でブレーキングポイントの設置、及びステップ実行も可能になります。Toolsの機能についての紹介はここでは行わないので別途調べてみてください。開発中の多くは以上で対処できると思います。serveの場合はCordovaプラグインを用いる機能はテスト出来ない点は注意です。次にモバイル端末実機でのデバッグ方法を紹介します。端末設定まずandroid実機側の設定を行います。https://developer.android.com/studio/run/device.html?hl=jaの「端末開発者向けオプションを有効にする」を参考に端末開発者向けオプションを有効にし、USBデバッグを許可しておきましょう。androidコマンドでアプリを実機にインストールしておきます。Chromeには、USB接続しているAndroid端末上のブラウザが表示しているコンテンツをデバッグする機能があります。Devices]を選択します。上のようなウィンドウが開き接続している端末の一覧が表示されるので、端末を選びます。実行中のブラウザが右横に表示されるので、そこからデバッグしたいIonicアプリを選択します。別ウィンドウでインスペクタが開くのでそこからPC上のWebサイト同様にデバッグが可能になります。端末設定[設定]->[Safari]->[詳細]->Webインスペクタを有効にしておきます。アプリをインストールしたiOS端末をUSBで接続しておきます。リモートデバッグiOSの場合はChromeではなくSafariを用います。Tools相当のものが使えるように設定します。メニューバーの[Safari]->[環境設定]->[詳細]で[メニューバーに開発メニューを表示]にチェックを入れます。これでメニューバーに[開発]が表示されるようになりました。[開発]メニュー内にに接続している端末が表示されます。端末を選びさらに端末上で実行中のWebアプリケーションを選択します。Tools同様にデバッグが可能になります。ライブリロードを実機でも行うPC上のブラウザで実行する場合はライブリロード(変更監視と自動更新)を行ってくれますが、実機でも同様にライブリロードを行いたい場合は以下のようにコマンドにオプションをつけて実行しましょう。-lclはライブリロードの指定オプション、cはconsoleログをターミナル上に出力するオプションです。Djangoの使い方(その14)PythonシェルでDBを操作する。~デプロイ準...CentOS7をダウンロードしてみた。foun...CentOS7をダウンロードしてみた。