Debug Ionic 2 Apps in VS Emulator for Android
Running the App in Visual Studio Emulator for Android
The official Android emulator has a big disadvantage for regular users of Hyper-V: you cannot run the emulator accelerated when Hyper-V is enabled. You need to reboot your machine every time you wish to switch between using a Hyper-V based virtual machine and a hardware accelerated Android emulator. Fortunately, there is an alternative: Visual Studio Emulator for Android, which uses Hyper-V for hardware acceleration.
The question is, how to run your Ionic or any other Cordova-based application in this emulator if you are using its CLI tooling in combination with your favorite text editor. There is a command to run your application in the emulator:
ionic emulate android
However, it will launch the official Android emulator instead of the Visual Studio one and there are no flags available to change that.
Since any running Android instance in Visual Studio emulator behaves as a connected physical Android device, this issue can be worked around easily enough. You will need to invoke Visual Studio Emulator for Android from Start menu beforehand and launch your desired device profile.
Once the instance boots, you can use the Ionic CLI to run your application on the device:
ionic run android
As long as you don't have any actual Android phone connected to your computer, this will result in the application launching in the currently running Visual Studio Android emulator instance.
Updating Ionic 2 Before Debugging in Emulator
To attach a debugger to it, first make sure that you are using the latest version of ionic and its @ionic/app-scripts package, because versions before 0.47 had some issues with source maps. Use npm upgrade ionic on your machine:
npm install -g ionic
If the command fails, try uninstalling the old version first and then invoke the command again:
npm uninstall -g ionic
npm install -g ionic
To upgrade the @ionic/app-scripts package, also use npm:
npm install @ionic/app-scripts --save-dev
You should however check its releases page afterwards because you will sometimes need to perform some manual changes to your project as well.
Debugging the App with Chrome DevTools
Now you're ready to attach Chrome debugger to the application. From the Chrome DevTools menu open More tools > Remote devices.
Next, select the emulated device on the left, and click the Inspect button.
This will open a new DevTools window, attached to the application web view. In the Sources tab you can navigate to a TypeScript source file and set a breakpoint to stop the program execution when hit.
Debugging the App with Visual Studio Code
If you're using Visual Studio Code to develop your application, you should consider using it for debugging as well. To do that, you will need to have Cordova Tools extension installed.
To configure the debugger, open the Debug sidebar, click the settings icon and select Cordova from the environment dropdown.
This will add a large collection of configurations to your launch.json file. You only Attach to running android on device:
{
"name": "Attach to running android on device",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
}
You can delete the other configurations and rename this one to your liking. Launch the debug configuration when the application is running in the emulator to attach to it. You can now set breakpoints in source files to break the execution when they get hit.
