Debugger Breakpoint not correct in Chrome - mapping wrong?


#1

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)


#2

I´m having the same problem since I updated (today) to Ionic CLI 3.15.0… :face_with_raised_eyebrow:


#3

Tried goin back to 3.14.0 and it didn´t fix it… :cold_sweat:


#4

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!!


#5

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?


#6

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…


#7

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.


#8

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… ) :crazy_face:

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…


#9

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.


#10

Can confirm that making sure that:

  1. Imports are defined in one line and not spreads across multiple lines

  2. @IonicPage is defined in one line:
    @IonicPage({segment: “…”})

  3. @Component is defined in one line:
    @Component({ selector: ‘…’, templateUrl: ‘…’})

Seem to make it work.


#11

+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 :wink:


#12

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.


#13

Ionic-angular 3.9
rxjs 5.5.11
@angular/core 5.2

And its still happening today. Thanks for your analysis and fix.


#14

I think we should fire a bug. How do we do that from here or at least link it to this thread?