When I tried ionic serve --lab, it did not make it debuggable, but this happened: When the app opened in Safari, it did not open as a browser app; rather, it showed 3 phone-sized apps, one for iOS, one for Android, and one for Windows. That’s pretty nifty, I guess.
Later: Duh, that’s exactly what --lab is supposed to do:
[–lab|-l] … Test your apps on multiple screen sizes and platform types
I just checked again, and the thing with using --labs is that for me, the sourcemaps are not found when executing the first device window, but they show up on the second and third. So if I set debugger on a line of a component in pages and then reload the browser, the debugger halts execution for that first device window sans sourcemaps. If I then click resume script execution, the second window that gets halted by the debugger is then accompanied by a source map detected message from the chrome debugger. Then I can see my code (actually javascript, but with all of the comments, function names, etc. intact).
1 Like
Not very comfortable indeed.
Even if you don’t see your code in sources left sidebar, you can access it via COMMAND + P on a mac or probably CTRL + P on windows. You will get something that is not your code exactly but you will be able to recognize it and set breakpoints. You can also set breakpoints directly from your code with the debugger; instruction.
For instance, the hello function in that code…
…
export class Page1 {
constructor(public navCtrl: NavController) {}
hello(param:string){
debugger;
console.log(`Hello ${param}`);
}
}
…
…is converted to:
…
_View_Page10.prototype._handle_click_25_0 = function($event) {
var self = this;
self.markPathToRootAsCheckOnce();
self.debug(25,16,31);
var pd_0 = (self.context.hello('world') !== false);
return (true && pd_0);
};
…
Hope they will do better or explain us how to do it the right way if we missed something. Of course, you will need to compile in dev mode in order to see that.
someone see this ? https://github.com/driftyco/ionic-app-scripts/issues/89
he used template instead of templateurl, as far as i tried it worked. But only the transpiled js is shown not the original ts.
@jdat82 chrome even won’t show me the pages in the file list or how ever the cmd+p thing is called. if i use the main.js and search for a page definition and set a breakpoint it jumps to the next posible source.map so debugging in this was is absolutly not posible.
I endet up using beta.11 for dev, copying all new stuff to rc0 and temporary use template instead of templateurl
If you have a component Page1.ts in your project, it will become Page1.ngfactory.js. You will not see it in sidebar but it is searchable from the palette (CMD+P).
In my example above, you can see that debugger; become self.debug(25,16,31); and console.log(Hello ${param}); become var pd_0 = (self.context.hello('world') !== false);. Because there is a debugger; instruction if you have devtools open, you will stop there.
Can’t imagine working like that forever but it can helps temporarily.
ok didn’t know that in the ngfactory files the code is hidden, but this does not work in my environment ether, i think there is something wrong with my source.map if i set debugger; or set a breakpoint it jumps to promise definition or somewhere else but not where i want the script to stop, hope someone fixes this problem for real 
but thx for explaining
ts debug is back … you can get the latest ionic-app-scripts from github and since commit #556d2e3 the ts sourceMaps work again
But in my env pages shown only when defined in template: not via templateurl:
Great news. Thanks for sharing.
How do I only update to latest ionic-app-scripts in my current ionic2RC0 project?
there is a simple way
1.npm uninstall @inoic/app-scripts
2.npm install @inoic/app-scripts@latest --save-dev
3.ionic serve
seams they have fixed the problem Thx
1 Like
There is an update today for app-scripts and I applied the fix.
npm install @ionic/app-scripts@latest
I am able to see the src folder and all my .ts files and able debug in chrome debugger…
1 Like
Can confirm, I see my .ts files too 
Can also confirm that my app is broken, again. This app-scripts update isn’t compatible with my namespaces. First error was that a namespace can’t have the same name has a class it contains. Now second problem, seems that my static properties are not accessible and loaded…so much fun 
see if you can find some help here -
well I’m just getting rid of all my namespaces then…hopefully Webstorm is good at refactoring 
I am able to debug from vscode too. and now can can put break points work. Very happy with this fix from ionic team.
Done, 93 files refactored in 37min
So yep confirm again, app run, ts files could now be debugged in chrome and build is still working.
Thx ionic team
Wait…I see the ts files, but could you guys manage to use breakpoints on them?
When I put breakpoints:
-
In a provider, the breakpoint is reached, but the values/variables/etc. are wrongly estimated. The debugger show me variable as “undefined” where in fact they aren’t (I set console.log to double check)
-
In my pages, I had breakpoints in ionViewWillEnter() and these weren’t reached aka it went thru without stopping
1 Like
I was able to debug and put break points when debugging via Chrome and also vscode ide. Also I am able to see values for variables when I hover over the variables.
Thx for the feedback…I guess then something’s wrong in my project, gonna have a look tomorrow
I don’t know if this will fix it but make sure you have “sourceMaps”:true setup in tsconfig.json under “compileOptions”
@reedrichards i have the strange behavior that i need to set the breakpoint one line under where it should be