I have been trying to debug the flow of an app. Initially I was using Webstorm debugging, but I have now reduced down to using “debugger” statements in Chrome. The problem is when it hits the breakpoint the line highlighted in chrome is incorrect it is about 5-6 lines above where it should be. So for example:
The debugger statement it has hit is (I believe) the first line in function “signup” as I just tapped “Create an Account”, but the highlighted line is in the middle of the validator above. This will continue to occur for each of the debugger statements in this code. Note: debugger in some of the other files hit the breakpoint correctly.
My research suggests that this is a mis-match between the ts file the js file and js.map file. - but how do I correct it?
I have tried deleting the .js and .js.map files and re-running Ionic Servre. As expected the .js and .js.map files get recreated, but the error persists.
I have updated everything I can - current ionic info is below.
I have built the project again in a new directory. Also ensuring it is never touched by Webstorm - thus eliminating that as a possible issue.
But the problem persists.
I don’t know what I am fighting here? Is the map file being created incorrectly by Ionic? Is Chrome reading it wrong? Can I correct the offset somehow?
Help!
Thanks
Nick
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.15.0
ionic (Ionic CLI) : 3.15.0
local packages:
@ionic/app-scripts : 3.0.1
Ionic Framework : ionic-angular 3.7.1
System:
Node : v6.11.3
npm : 3.10.10
OS : macOS Sierra
Misc:
backend : legacy
Chrome is Version 61.0.3163.100 (Official Build) (64-bit)
I´m having the same problem since I updated (today) to Ionic CLI 3.15.0… 
Tried goin back to 3.14.0 and it didn´t fix it… 
In someways it is a relief you are seeing it too - but that doesn’t get us to what is wrong. As the original codebase is yours, are you able to re-create the issue with a cut down version? Also I was using (I think) 3.12 of the CLI when I first saw the problem. I only went to 3.15 today in the hopes it might help!!
Some more information …
The issue is something to do with “IonicPage” and the “@IonicPage()”. What I did was create the template project “Conference” and step by step convert from that (working code) login page to the login page from Jorge’s example. The debugger “broke” when I added “IonicPage” to the imports.
I then went back to the original code and removed “IonicPage” and “@IonicPage()” and login.module.ts, modified the app.component.ts to use the loginpage (not lazy loaded? Is that what I am doing?) so imported it and added to declarations and entry components (basically just adding it wherever “home” appeared. And bingo, the breakpoint hits in the debugger.
I then checked another page “deeper” in the project with “@IonicPage()” and this seemed to breakpoint fine. So is this something to do with the login and signin page being a “root” page?
But while this appears to “work”, it doesn’t seem right.
I am still really a beginner on how Ionic works, but pretty good at working through bugs! So my terminology may be out. Does that give anyone out there an “ah ha” moment?
1 Like
Well, I just found a very rare thing on my project…
On pages where debugger is not working I had imports written this way:
import {
NavController,
NavParams,
Events,
AlertController,
ModalController,
ToastController,
ViewController,
Loading,
LoadingController,
IonicPage
} from ‘ionic-angular’;
once I edited those to a single line:
import { NavController, NavParams, Events, AlertController, ModalController, ToastController, ViewController, Loading, LoadingController, IonicPage} from ‘ionic-angular’;
debugger started working correctly (stopping succesfully on my breakpoints)…
but why? I don´t really understand the problem here nor how to solve it, but setting all imports ‘one line’ is a working workaround for me at this moment…
9 Likes
I can confirm, the same workaround of putting the “ionic-angular” imports on one line seems to fix the issue for me too (Thanks Jorge). How do we get this investigated by the Ionic Team? We can’t be the only ones hitting this, although my code did start from Jorge’s code examples for Firebase.
What do you mean that your code starts from my code examples??? I haven´t put any code examples here (I don´t even know how to use Firebase… ) 
As for getting this behavior investigated I have no idea… maybe opening an issue on https://github.com/ionic-team/ionic-cli/issues, but I would have to ask for permission to provide code, the project isn´t mine…
Sorry Jorge, I assumed you were “Jorge from JAVEBRATT” I was working on code from his Firestore course, although have adapted it to Firebase. So double confusion. Sorry.
Can confirm that making sure that:
-
Imports are defined in one line and not spreads across multiple lines
-
@IonicPage is defined in one line:
@IonicPage({segment: “…”})
-
@Component is defined in one line:
@Component({ selector: ‘…’, templateUrl: ‘…’})
Seem to make it work.
6 Likes
+1 Jorge !
Your workaround also fix the problem for me !
import {IonicPage, ...} from "ionic-angular"; // on a SINGLE line.
I was searching for a long tim how to fix this and never imagine such a simple tricks ! Nice 
3 Likes
Happy it helped!
I didn´t know it still happens (and why)… I´ve been away from ionic for some time now.
I was thinking this issue may be originated by the template used at project creation since it doesn´t happen always.
For reference, I used ‘super’ template.
Ionic-angular 3.9
rxjs 5.5.11
@angular/core 5.2
And its still happening today. Thanks for your analysis and fix.
I think we should fire a bug. How do we do that from here or at least link it to this thread?
1 Like
Seems that in cases of component inheritance the fix does not work.
It randomly stops on the breakpoint once and then ignores it.
Clearing the browser cache and restarting the server does not work.
Only explicitly specifying “debugger” in the code, gets the debugger to stop on that line.
I did first. now first fine.
did someone create a bug for this?
Only this “solve” my problem
This has worked for me. Thank you
