Ionic-cli: How to debug in RC.0?

[PeterKassenaar]

In .rc0, Ionic now by default bundles all the code into one gigantic main.js file as far as I can tell. I believe this is the result of the Angular AoT-compile path Ionic now takes.

While this is great news for end users, it makes it very difficult, if not impossible, to debug Ionic apps in the browser. The .map-files that mapped the generated .js-code to the .ts source code are useless.

Is it possible for example to add a switch or a new command to the CLI, so that the AoT compile steps are skipped? That way it would be much easier to debug Ionic apps.

Or is there another preferred way to debug? I would love to hear it!

Thanks,
Peter.

[gabrielmuresan]

I am also confused:

`app-2 ionic emulate ios -l -c -s --debug

Running 'emulate:before' npm script before emulate

app-2@ build /Users/myusername/work_folder/app-2
ionic-app-scripts build
[22:56:40] ionic-app-scripts 0.0.28
[22:56:40] build prod started ...
[22:56:40] clean started ...
[22:56:40] clean finished in 7 ms
[22:56:40] copy started ...
[22:56:40] ngc started ...
[22:56:40] lint started ...
[22:56:40] copy finished in 138 ms
[22:56:41] lint finished in 921 ms
[22:56:54] ngc finished in 13.52 s
[22:56:54] bundle prod started ...
[22:57:02] bundle prod finished in 8.60 s
[22:57:02] sass started ...
[22:57:04] sass finished in 1.41 s
[22:57:04] minify started ...
[22:57:04] cleancss started ...
[22:57:04] uglifyjs started ...
[22:57:13] uglifyjs finished in 9.39 s
[22:57:13] cleancss finished in 9.39 s
[22:57:13] minify finished in 9.40 s
[22:57:13] build prod finished in 32.94 s
Setup Live Reload
`

[jeandat]

I agree, this is indeed quite horrible. But for what its worth, there is a few things you can do in the mean time.

Default npm scripts will make you build in production mode for ionic emulate and ionic run commands. Even with the livereload option. Only ionic serve uses a dev build.

The only way I know to compile in dev mode via npm is to use npm run build -- --dev or npm run watch. By reading your terminal logs or directly ionic-app-scripts code, we can see that in dev mode there is 2 steps less: ngc and uglify. So the easier is to do this I guess:

• Remove all …:before npm scripts inside package.json
• Build in dev mode and start a watcher with: npm run watch in one terminal
• Deploy your code the way you like with ionic serve for instance in another terminal

If you add a new method inside Page1 class (from the sidemenu template) like this:

…
export class Page1 {
  constructor(public navCtrl: NavController) {}
  hello(param:string){
      debugger;
      console.log(`Hello ${param}`);
  }
}
…

You will get something like this:

…
_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);
};
…

You can use breakpoints or directly the classic debugger; instruction in order to debug it.

To find your code inside Chrome DevTools use COMMAND + P on a mac or probably CTRL + P on windows and type the name of your component.

[gabrielmuresan]

A way simpler workaround would be to change these lines in the package.json
original:
"emulate:before": "build",
to:
"emulate:before": "watch",

and now the command:
ionic emulate [-l] [-c] [-s] will always build in dev mode regardless of parameters

[jeandat]

That's true but you lost the ability to deploy production code to your simulator or device. For instance if you want to test your app performances with ahead-of-time compilation. You will have to edit your package.json.

I don't think it is good practice to force and correlate the type of build to an ionic command especially the ones deploying code. It should be configurable on the command-line dynamically.

[PeterKassenaar]

Yes - that was my concern also. I want to be able - ideally via the Ionic CLI - to deploy development AND/OR production code to the device, for example to be able to test and debug Ionic Native plugins on the device (something that can't be done in the browser).

Thanks however for the workaround(s).

[jgw96]

Hello all! Thanks for using Ionic! So to do a dev mode build to a device you can change this line in your package.json to "build": "ionic-app-scripts build --dev". You can also just run npm run build --dev. Also we recently, as of ionic-app-scripts 0.0.30, added source maps to the dev build, which means that debugging should now work in RC0 just like it did in beta.11. We are also talking about making it where ionic run android --dev and have that do a dev build so that you will not have to change anything different in your package.json. Finally sorry for any hassle, and for the delay on the response to this issue.