Debug ionic app with visual code

If you are using visual code and don’t know how to debug the mobile app code, you are missing on a versatile feature of visual code.

Some of the developers use visual code to only debug the mobile code, but a very few actually know how to attach the debugger to the live code and debug, it will also do a live reload of the application and will simulate in the browser also, in case you don’t want to debug in the real device or the android emulator.

 

Lets download the debugger for visual code, available for cordova.

https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools

 

 

 

Now best bet is to close all files and folders and exit the visual code and restart it.

If every thing is fine, you should be able to see the available configuration for debugging the ionic by clicking the settings icon.

If you are not able to see any thing after clicking the settings icon, there might be a problem with the launch.json file which defines the debug configurations.

 

Delete the launch.json file and restart the visual code.

This time it should show you these options and in case you are still not able to see these options.

Please paste the below in your launch.json configuration section and restart the visual code.

=====================================

 

After this, last option is to delete .vscode folder, logout of system and relogin and reopen visual code.

 

Ok, so now i assume your debug options are available and its time to understand how to debug the app.

 

So fire up the simulate android in browser option and click on one of the breakpoints of the controller or app.js. Now click on the green arrow to start the debug process.

If your debug breakpoint is loaded, it will halt there.

If you are on browser windows operating on your app, it will blink to broadcast the breakpoint hit.

 

Now you can debug the variables in the debug window as long as the breakpoint is in halt state.

Congrats, you have started doing the smart thing and it will definitely speed up your development process.

In case you want to get started on how to build ionic app using android on a virtual machine  you can refer to the earlier tutorial series.

Keep Reading !