Ionic-app-scripts: sourcemaps not working with rc0

[rob3c]

I originally posted this as a comment (https://github.com/driftyco/ionic-gulp-tasks/issues/22#issuecomment-250328376) in an ionic-gulp-tasks issue before realizing this is probably a more appropriate repo - oops...

Source maps appear broken with the new rc0 setup (I'm using the tabs starter with Crosswalk 2.1.0).

First of all, no form of sourcemaps are enabled by default in the starter project tsconfig.json, but that's not strictly an ionic-app-scripts issue. If you set "sourceMap": true, there will be ultimately two layers of indirection in the source map file references: main.js.map will point to ../../node_modules/ files (which work), as well as ../../.tmp/ intermediate .js files. The side-by-side intermediate .js.map files do point back to the original ../../src source files and you can see the sourceMappingURL=data:... comments in the Chrome debugger, but Chrome just ignores those references and only shows the intermediate .js file sources.

Then, if you try to inline the sourcemaps instead via inlineSourceMap and inlineSources in tsconfig as an attempt to bypass any path issues, the inlined source does make it to the intermediate js files (and the same options are mirrored in the generated tsconfig.tmp.json file), but the inlined source doesn't make it through to the www/build output. There's still only a regular www/build/main.js.map file generated without any inlined source :-(

[danbucholtz]

We are definitely aware of this. We are going to be pushing out updates to @ionic/app-scripts fast and furiously taking advantage of semver and the ^.

Thanks,
Dan

[six006]

Can't debug,I will not use ionic2.rc0

[rodries]

Any news on this issue?
I cannot use rc0 because of this bug, at now I'm using beta11 to be able to debug.

[cmaart]

Can confirm. Already running on rc0 and it's a pain :-/

[danbucholtz]

Are you saying you're not getting source maps on device?

[jmesa-sistel]

No. The maps are wrong, they are not pointing to the source files. Read first comment.
Are you able to debug?

[six006]

debug is very import ,can you debug from ts files.

[flobacher]

is there any update on this? the problem is exactly as @rob3c described it on the top. It is possible to enable the generation of sourcemaps for ts->js and for scss->css but both of them are broken!
please fix or tell if we can assist in any way, but the current situation is really bad =/

[flobacher]

srcmaps for ts -> js seem to be fixed thx to #556d2e3 please update version so this is installable via npm =)

[PhilippRath]

@flobacher this patch works for you? updated app-script, same result but much faster 😄, ok the src folder ist there, but it does not find my templateurl file and under pages only shows the inline Template pages

[danbucholtz]

That fix is not ready to go yet. We're working on this as I type this, though.

Thanks,
Dan

[adamdbradley]

JS sourcemaps have been updated in the latest release. Please pull down the latest and let us know if it fixes your issues, thanks.

npm install @ionic/app-scripts@latest

[jmesa-sistel]

It is not working for me.
My steps:
Create a simple project with a button and set the click event to a function which have a console.log.
Add breakpoint to that function.
Run in android device with:
ionic run android -l
In VS Code (using Cordova Tools extension) debug with attach to running android on device.
The breakpoint is not working.
The same test with beta11 works perfect.
I have checked the generated map file and the is no reference to the source files.

Edit:
I have seen somthing weird.
When I execute that command I can see:
bundle prod started ...

I think it should be: bundle dev started ...

Edit2:
I have tested ionic serve and breakpoints are not working anyway

[PhilippRath]

not all ts files are available inside the sourcemap #101

but definitely fast forward, thank you for your good work

[ovitrif]

CSS still doesn't work, all I get is the main.css file.

[flobacher]

@ovitrif you can generate srcmaps for sass with a custom sass-conig where you set sourceMap to true.
This will generate a srcmap file, the only problem is, that for some reason it looks to be broken.. =/

[danbucholtz]

We made some additional fixes here, please test:

npm install @ionic/app-scripts@latest

[rajpat]

Thanks for the fix.
I am able to see the src folder and all my .ts files and able debug in chrome debugger. Also I am bale to debug from vscode.

[flobacher]

Huge THX! Works for me as well!

[danbucholtz]

I am going to close this issue since it is resolved now.

Thanks,
Dan

[TiVoMaker]

Pulling app-scripts@latest is not working for me.

Using "ionic emulate ios", which does a production build rather than the dev build of "ionic serve". Looking at www/build/main.js.map, it appears broken. The "sources" field should be the list of source files, however it is just the absolute filesystem path to the www/build/main.js file. There's no "sourceContents" field. The map is useless. Oh, and the app fails to load.

Can't do an "ionic serve" run to compare, because in dev builds I get a rollup problem, but that's a separate issue - I think. I'm suspicious, because everything worked this morning before pulling app-scripts.

[danbucholtz]

@TiVoMaker, it might be best to blow away your node_modules and your www directory and just start with a fresh build. Run npm run build to do a local prod build without deploying to the device.

Thanks,
Dan

[cleever]

Installing app-scripts@latest isn't working for me too.

The breakpoints works at first sight but goes crazy after one or two steps.

[S-K-Lieren]

See https://github.com/driftyco/ionic/issues/8292 now.

[jmesa-sistel]

SourceMaps are not working fine, @danbucholtz why has been closed?
There are some problems.

First:
When you run then command:
ionic run android -l
or ionic build android
the generated bundle is prod instead dev so you cannot attach to the device to debug.
(I have done a hack in config.js to create dev builds always)

Second:
The sourcemaps are not well generated when you are debugging a ts sometimes you jump into the js file, as @cleever has commented

Third:
The breakpoint lines are not always accurate (I guess because of second).

Why the team is not testing the changes executing a test and trying to debug in a device?
It is very easy to do it with vscode and cordova tools plugin
In beta 11 everything works flawlessly.

[flobacher]

concerning broken scss/css sourcemaps see: #46

[marcocarosi]

I would like to confirm the issues that @jmesa-sistel is pointing are still occurring (upgraded to the latest @ionic/[email protected] )

The dev setup I am using:

• visual studio code, (using Cordova Tools extension)
• emulated iOS over Mac OS X (Xcode 7.3.1)
  that means that the sourcemaps issue is occurring with Safari as well.

Again, with ionic framework beta breakpoints were working flawlessly using the same setup.

What is the right thread to follow this issue?
I see this thread is closed, while https://github.com/driftyco/ionic/issues/8292 seems to be little off topic.

[jmesa-sistel]

I have tested pull request 126 and now I can debug properly.

Please merge it for the next version

Edit:
I am debugging in the device using livereload (ionic run android -l) but I have had to hack the config.js to create a dev bundle because "ionic run" create a prod build. So hacking config.js & using pull request 126 I can debug properly in VS Code with Cordova Tools using Attach to running android on device

Edit2:
Notice that if you run "ionic run android -l" the watch process is not started. So my trick is execute:
ionic run android -l
q (quit)
ionic serve
Now debug in the device
But I have problems (cordova is not defined)

[jmesa-sistel]

To be able to debug on device we need that

• Merge pull request 126
• "ionic run android -l" generate a dev build , start the live reload server and start the watch process.

Thanks

Edit:
To get watch working I have modified my package.json
"run:before": "build" => "run:before": "watch"

[ashokshetty1970]

in package.json in scripts section you may have following

"scripts": {
.....
"ionic:serve": "ionic-app-scripts serve"
}

Change as follows to force generating source map. Strangely production build forces the source-map but dev build (in serve) doesn't use.

"ionic:serve": "IONIC_SOURCE_MAP=source-map ionic-app-scripts serve"

Once I made the above change I started seeing the typescript files in Chrome debugger.

[danbucholtz]

You can set a config setting in package.json too. That is cleaner IMO.

...
"config" : {
   "ionic_source_map" : "source-map"
}

Thanks,
Dan

[ryaa]

For me the problem was that when you're remote debugging on an android device, Chrome debugger cannot access the source map file on the device. The solution/fix is to include the source map inline - see details at https://github.com/driftyco/ionic-app-scripts/issues/610