【VS Code】Ionic 2 debug android on device【実機】

1 準備
2 debugの実行

準備

Ionic2のAndroid実機でのデバック方法を紹介します。android端末が認識できる状態にしておく必要があります。具体的にはAndroid StudioでAndroid実機のデバックができる状態になっていれば問題ないと思います。

Cordova Toolsのインストール

VS CodeにCordova Toolsをインストールします。インストール後はプラグインを有効にするためにVS Codeを再起動します。

launch.jsonの編集

.vscode\launch.jsonの編集を書き換えます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to running android on device",
      "type": "cordova",
      "request": "attach",
      "platform": "android",
      "target": "device",
      "port": 9222,
      "sourceMaps": true,
      "cwd": "${workspaceRoot}"
    }
  ]
}

{

"version": "0.2.0",

"configurations": [

{

"name": "Attach to running android on device",

"type": "cordova",

"request": "attach",

"platform": "android",

"target": "device",

"port": 9222,

"sourceMaps": true,

"cwd": "${workspaceRoot}"

}

]

}

package.jsonの編集

ionic cordovaコマンドを毎回叩くのは面倒なのでpackage.jsonにandroid:debugを追加します。

"script" {
    ....,
    ....,
    "android:debug": "ionic cordova run android --device -l -c --debug"
}

"script" {

....,

"android:debug": "ionic cordova run android --device -l -c --debug"

}

debugの実行

実機にアプリのインストールをします。

npm run android:debug

1	npm run android:debug

IPアドレスの選択が出た場合、PCのIPアドレスを指定します。私の端末はdocker等を入れているため仮想LANがあります。

? Please select which IP to use:
  10.0.75.1 (vEthernet (DockerNAT) 2)
> 192.168.0.100 (イーサネット)        <- PCのIPアドレスを選択
  172.30.160.1 (vEthernet (nat))
  172.18.236.33 (vEthernet (既定のスイッチ))