Hi Friends,
This is a response post to many of our friends asking me how to debug our apps. To be honest, I din’t look into this much and followed the traditional method (which was a big headache as the app became large). One of our friends J Glaser contacted me and instructed me on a new method which would make debugging much easier using the google chrome browser debugger.
A big thanks to our friend J Glaser who helped me with this debugging technique.
Let’s begin.
A video screencast of this post
First let’s scaffold out an Ionic 2 app using the below command.
|
1 |
ionic start debugapp --v2 blank |
(I am using ionic cli version 2.1.8).
Now just give ionic serve and open up your app in a chrome browser.
Open up the inspector(Ctrl + Shift + I) and click on sources. You would see a screen like this.
Now as you could see in the directories on the file tree left side you wouldn’t be able to see the ts files. This is due to the fact that the ionic_source_map is set to the value eval. Let’s change it.
Before that let’s make our app do something. Open up home.html and add the below code in between <ion-content> tags.
|
1 2 |
<button ion-button (click)="increment()">Add one</button> <h1>{{currentvalue}}</h1> |
Open up home.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { currentvalue: number = 0; constructor(public navCtrl: NavController) { } increment() { this.currentvalue+=1; } } |
Now what we have done is very simple. We just have a button which when clicked will increment the value of a variable.
Now open up package.json and add this variable.
|
1 2 3 |
"config": { "ionic_source_map": "source-map" }, |
Now give ionic serve and open up your browser inspector again.
You will see the files are now available under a directory called debugging.
Now that you have the ts files available. You can debug using the debug tools available on the right side just like you do in any IDE debuggers.
You can set breakpoints, conditional breakpoints, skip statements, break out of functions all that stuff.
Hope this helped you guys. Thanks for reading. Peace.. 
