準備
Ionic2のAndroid実機でのデバック方法を紹介します。android端末が認識できる状態にしておく必要があります。具体的にはAndroid StudioでAndroid実機のデバックができる状態になっていれば問題ないと思います。
Cordova Toolsのインストール
VS CodeにCordova Toolsをインストールします。インストール後はプラグインを有効にするためにVS Codeを再起動します。
launch.jsonの編集
.vscode\launch.jsonの編集を書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "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を追加します。
1 2 3 4 5 |
"script" { ...., ...., "android:debug": "ionic cordova run android --device -l -c --debug" } |
debugの実行
実機にアプリのインストールをします。
1 |
npm run android:debug |
IPアドレスの選択が出た場合、PCのIPアドレスを指定します。私の端末はdocker等を入れているため仮想LANがあります。
1 2 3 4 5 |
? 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 (既定のスイッチ)) |
実機にアプリのインストールされますので、これにVS Codeからattachをし、デバックできるようにします。実際にはVS CodeでF5を押すだけです。
break pointの設定もでき、デバックコンソールから変数を入力することにより、値の確認などもできるようになります。