はじめに
こんにちは、ベーコン婆男です。
マイクロソフトの無償エディターであるVisual Studio Codeを使って、Android向けのIonicアプリを開発する場合のデバッグ方法について記載します。
Visual Studio Code(VS Code)の環境設定
1. AndroidでWebRTCアプリ開発(開発環境準備編)に従って、開発環境をセットアップ。
2. VS Codeのメニューの「表示」>「拡張機能」から、「Cordova Tools」をインストール。
3. VS Code左メニューのデバッグアイコンをクリック
4. VS Codeの上部の設定アイコンをクリック
5. 「launch.json」ファイルが開くので、Androidの実行環境を追加して保存。
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/www\\angular\\login\\loginController.js" }, { "name": "Run android on emulator", "type": "cordova", "request": "launch", "platform": "android", "target": "emulator", "sourceMaps": true, "ionicLiveReload": true, "devServerTimeout": 50000, "cwd": "${workspaceRoot}" } ] }
上記の例では、赤字の部分を追加。
- name: 実行環境を区別する任意の名称
- type: “cordova”を指定
- request: “launch”を指定
- platform: “android”、もしくは、”iOS”
- target: “device”(実機の場合)、”emulator”(エミュレータの場合)、もしくはデバイス名
- ionicLiveReload: ソースを修正した場合にリアルタイムに修正を反映させる場合は、”true”を指定
- devServerTimeout: タイムアウト時間を指定。デフォルト値ではタイムアウトするケースが多いため、その場合は大きい値を指定
デバッグの実行方法
1. VS Codeのターミナルもしくはコマンドプロンプトからコマンドを実行
$ ionic cordova prepare $ ionic cordova platform add android
2. Android StudioのAVD Managerを起動し、エミュレータを起動。
(エミュレータでデバッグする場合、エミュレータの起動中にタイムアウトが発生する場合があるため、事前にエミュレータを立ち上げておく、もしくはdevServerTimeoutの値を大きくしておく)
3. デバッグ画面で、上部のメニューから環境設定で作成したプロファイルを選択。
(Run android on emulator)
4. デバッグ画面の上部のデバッグ実行アイコンをクリック
5. ビルド後、デバッグモードで実行されます。VS Codeのデバッグコンソールに経過情報やログが表示されます。
- VS Codeのソース番号に左側をクリックするとブレークポイントを設定したり、そのときの変数の値を確認したりすることができます。
- IonicLiveReloadをtrueに設定している場合、ソースを変更して保存すると、その都度変更が反映されます。
以上