はじめに

こんにちは、ベーコン婆男です。

マイクロソフトの無償エディターである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に設定している場合、ソースを変更して保存すると、その都度変更が反映されます。

以上

Visual Studio CodeでのIonicアプリ(Android)のデバッグ

はじめに

Visual Studio Code(VS Code)の環境設定

デバッグの実行方法

コメントを残すコメントをキャンセル

はじめに

Visual Studio Code(VS Code)の環境設定

デバッグの実行方法

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル