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

はじめに

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

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

以上

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です