continued missing source map debug issues

[lrlarson]

Short description of the problem:

With [email protected], source maps are not available for debugging in Chrome and Firefox.

What behavior are you expecting?

To see source .ts files for debugging.

Steps to reproduce:

1. Build app with [email protected] and latest everything
2. Use Ionic Serve to open app in Chrome
   3.Go to dev. tools -- no source map files are available. This was working fine prior to webpack installation. With version [email protected] source maps are available the right .ts files, but have null as content.

Which @ionic/app-scripts version are you using?
[email protected]

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
There was a previous issue listed here as closed with version [email protected], but I a getting this behavior with [email protected]

[danbucholtz]

Published as 0.0.39. I accidentally removed the config when testing out better source maps. Expect to see better source maps drop in 0.0.40.

I'll keep this open to track better source maps.

Thanks,
Dan

[lordgreg]

Even though the source maps are now there, they are transpiled js files, not the original TS files. That being said, not being able to use the correct sources is like not being able to use sourcemaps at all.

Keep up the good work Dan

....waiting for the new, fixed 40 version 👍

[danbucholtz]

@lordgreg, @lrlarson,

This is in master branch right now if you're interested in testing it out. npm link should work.

Thanks,
Dan

[jmesa-sistel]

I'm testing last master code and maps are not well generated, at least using windows.
The map refs are to "webpack:///?????.ts" instead "webpack:///pages/????/????.ts" so we can not link maps with ts files properly.

[radrad]

When main.js.map worked with v 0.0.34 it produced this (shortened version):
{
"version" : 3,
"file" : null,

"../../node_modules/rxjs/util/ObjectUnsubscribedError.js", "../../node_modules/rxjs/SubjectSubscription.js", "../../node_modules/rxjs/Subject.js", "../../node_modules/@angular/core/src/facade/async.js", "../../node_modules/@angular/core/src/zone/ng_zone.js", "../../node_modules/@angular/compiler/src/compiler.js", "../../node_modules/@angular/compiler/src/output/path_util.js", "../../node_modules/@angular/common/src/pipes/index.js", "../../node_modules/@angular/common/src/common_module.js", "../../node_modules/@angular/common/index.js", "../../node_modules/@angular/platform-browser/src/private_import_core.js", 
"../../node_modules/@angular/http/src/http.js", "../../node_modules/@angular/http/src/http_module.js", "../../node_modules/@angular/http/src/index.js", "../../node_modules/@angular/http/index.js", "../../node_modules/ionic-angular/util/util.js", "../../node_modules/ionic-angular/config/config.js", "../../node_modules/ionic-native/dist/esm/index.js", "../../src/pages/home/home.ts", "../../src/pages/about/about.ts", "../../src/pages/contact/contact.ts", "../../src/pages/tabs/tabs.ts", "../../src/app/app.component.ts", "../../src/app/app.module.ts", "../../src/app/main.dev.ts"],
"sourcesContent" : ["export default typeof global !== \"undefined\" ? global :\n            typeof self !== \"undefined\" ? self :\n            typeof window 

So all custom .ts files were included as well as all files in node folder: node_modules
Was it normal to include all files and not only referenced (used) files. But it does contain all custom .ts I use and I am interested in debugging. It would be nice to include .ts from some of the frameworks when I need to debug them for some reason.
Can you explain how sourcemap is structured i.e what should it contain in in what order. I see a lots of code embedded in the sourcemap. What .js is that. And finally I see the mapping AAI,EAAE,IAAI, .... keys at the bottom which is encrypted line numbers mapping I suppose.
I posted about my source map problem here:
https://stackoverflow.com/questions/40356559/debugging-ionic-2-app-using-typescript-source-map-file-not-seen-by-vs-2015-deb
I have 2 projects on my google drive, first of which works (used app-script v 0.0.34) and the second one that doesn't work (v.0.0.36 and 0.0.39)
Rad

[jmesa-sistel]

Tested with 0.0.41 now the maps are found but the breakpoints do not work.
I have open the issue 330 with a very simple test

[TofuDaCat]

Using any of the latest Ionic 2 RC2 starter projects, settings breakpoints don't work out of the box with the 0.0.38 version of ionic-app-scripts.

The 'temporary' workaround I found was to explicitly use version 0.0.34 of ionic-app-scripts, and breakpoints get hit again.

@jmesa-sistel's new opened issue 330 (maybe a dupe to this?) also repro with other Ionic 2 starter projects I've tried as well.

[dbeylkhanov]

same problem =(

ionic cli 2.1.4
ionic-app-scripts v0.0.41

[lordgreg]

So this issue still persists. No sourcemaps what so ever.

ionic-app-scripts 0.0.42.
ionic-cli 2.1.7

Chrome aka Canary:

Firefox:

EDGE

is anyone testing this internally?

[danbucholtz]

@lordgreg, yes we are testing.

When you do a prod build, which it looks like you're doing in the event of firefox above, there are no source maps enabled since it's a prod build. It uses minification, etc.

When you run ionic serve, you are doing a dev build and do have access to source maps.

Here is an example of the default eval source map (which is faster):

You also have the option to override the webpack devtool setting (sourcemap) by setting ionic_source_map to source-map or any other valid Webpack option. That gives a sourcemap that looks like this but a slower build time:

Would love to hear what we could do better, but for now I'm going to close this issue as it appears to be resolved. Please let me know if it's not and we're misunderstanding something.

Thanks,
Dan

[lordgreg]

@danbucholtz thank you for very fast reply, thumbs up for that.

However, your assumption that I'm running two different builds was false. The screenshot above was made on top of single ionic serve -b immediately after new cutePuppyPics project was generated with latest cli. And, as a developer, I don't understand how can anyone accept the "webpack-created-TS" which can be seen in my Chrome screenshot above, valid/decent possibility to debug its code.

As you said, switching config to source-map like that in package.json:

  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map"
  },

shows me source like that:

which is also completely wrong since there is no folder structure or anything.

The whole process of development really became a struggle. The ionic-app-scripts as they are now, are, for developer, not so usable.

That being said, I cannot understand this issue being closed since the source in browser isn't the same as source in my editor.

Maybe there is also something I am missing and am just being to negatively-oriented. Maybe I am using the developers process totally wrong? Please, give us/me advice how Ionic Team is debugging/testin/developing TypeScript-based Ionic 2 app.

It really looks I/we went into completely wrong direction.

[TofuDaCat]

Hey Dan,

Can you share out a simple workflow on setting and hitting a breakpoint in one of the ionic start apps? (e.g. ionic start myApp blank --v2, or even, ionic start MyIonic2Project tutorial --v2)

That way we can also verify and ingest the debug/testing workflow that you guys have - since it sounds like for your guys' environment, it's working. Builds 40 and 41 of app-scripts didn't work for me on a fresh ionic environment, so I think there is a bug hiding somewhere.

Build 34 was the only version I could get debugging working again, but it's not a very sustainable solution.

Thanks

[danbucholtz]

@kaiwenC,

We just open Chrome dev tools, look in the sources browser for webpack:// and then find the source file that way and set breakpoints. I think this is a pretty typical workflow.

To be clear, we know we need to have better debugging support and source maps on the device via ionic run. That will come soon. Right now we're really focused on ionic serve but probably next week I will tackle the ionic run stuff.

Thanks,
Dan

[TofuDaCat]

Awesome, Chrome dev tools did the trick. Thanks for sharing!

My personal workflow included using VS Code + Cordova tools to debug through the code. Looks like there is a known issue where the Cordova Tools needs to be updated to accommodate the latest Ionic 2 changes, and somehow, v.34 of the app-scripts enabled this scenario.

I'm unblocked now, and have a path to debug.

Thanks again Dan!

[Rainson12]

Debugging doesnt work with Visual Studio 2015 and Ionic RC2 + App Scripts v. 0.0.43. Breakpoint will not be hit. However it was worked with app-scripts version 0.0.36 + RC1

[danbucholtz]

@Rainson12,

We'll look into it likely in a few weeks but for now the best bet is going to be to debug in Chrome. I'm not sure that Webpack supports debugging in IDEs, etc.

Thanks,
Dan

[Rainson12]

i just canceld my ionic subscription. This is the dumbest ive ever heard. Ionic is mostly used for Mobile applications, now what if i use like an accountmanager or any other native functionality. How do i debug these functions in a browser?!

[danbucholtz]

@Rainson12,

Very sorry to hear that. Here's how you debug in a Chrome. This is how the overwhelming majority of web development and debugging occurs:

1. Run ionic serve from a project directory which will build the project and open a browser. For now, we'll assume the browser is chrome but all major browsers work similarly.
2. Open Chrome DevTools by clicking the triple dots in the top right corner of the browser window and selecting "More Tools" and then "Developer Tools".
3. Go to the "Sources" tab
4. Select the file you want to in the panel on the left
5. Set breakpoints, etc similar to how it'd work in an IDE

Here's more info on the Chrome DevTools. They are incredibly useful and I cannot imagine using Ionic or another development toolset without them.

Thanks,
Dan

[danbucholtz]

@kaiwenC, yep, we are working with the VSCode team to get this working again. It hasn't worked since RC0 and we're working on it. More than likely it will work with Visual Studio proper, too.

Thanks,
Dan

[Rainson12]

@danbucholtz your solution might work if you aren't using any native functions but as soon as you use cordova.exec youre lost. Is there any way to remove the webpack stuff?

[danbucholtz]

@Rainson12, We are working with the VSCode team to get the source map thing fixed. It will be fixed soon. It's high priority for us.

Thanks,
Dan

[Rainson12]

thanks @danbucholtz we'll wait.

[danbucholtz]

@Rainson12,

If you add a config setting to your package.json with a value of ionic_bundler to set rollup, are you able to debug in your IDE? Please see the docs here for any details on providing a custom bundler. I am curious if those developer's using Rollup are able to debug in Visual Studio or VSCode.

Thanks,
Dan

[jmesa-sistel]

@danbucholtz
I have added

"config": {
    "ionic_bundler": "rollup"
  },

in package.json and I have changed lauch.json
"webRoot": "${workspaceRoot}/www"

Now I can debug properly using rollup.

The next test was try webpack.
I am testing last code from github (5c4c547) but webpack config is not working properly, the breakpoints are misplaced.
In launch.json "webRoot": "${workspaceRoot}"

PS
I have to say that I have a special config.
I debug using ionic serve and then I attach to chrome, I created a new config in launch.json

{
  "name": "Launch Chrome against localhost, with sourcemaps",
  "type": "chrome",
  "request": "launch",
  "diagnosticLogging": true, // option to debug config problems
  "url": "http://IPADDRESS:8100/",
  "sourceMaps": true,
  // the next 2 options is to create a new chrome instance and avoid message errors
  "runtimeArgs": [
      "--disable-session-crashed-bubble",
      "--disable-infobars",
      "--disable-application-cache",
      "--media-cache-size=1",
      "--disk-cache-size=1"
  ],
  "userDataDir": "${workspaceRoot}\\chromeDummyDir",
  "webRoot": "${workspaceRoot}/www"
}

Notice "type": "chrome", I'm using chrome extension here.
When I debug in the device I use 'ionic run android -l' and then attach to the device

"name": "Attach to running android on device",
"type": "cordova",

[Rainson12]

@danbucholtz
using the config setting you gave me the debugging works again (with app-scripts 0.0.39).

When building the app i get a lot of

[10:04:22] rollup: Conflicting namespaces: D:\Users\Rainson\Documents\Visual Studio 2015\Projects\Ionic2_sample37\node_modules\@angular\compiler\index.js re-exports 'TextAst' from both D:\Users\Rainson\Documents\Visual Studio 2015\Projects\Ionic2_sample37\node_modules\@angular\compiler\src\template_parser\template_ast.js (will be ignored) and D:\Users\Rainson\Documents\Visual Studio 2015\Projects\Ionic2_sample37\node_modules\@angular\compiler\src\template_parser\template_ast.js.

is there any way to remove hide these yellow lines or even fix them?
EDIT: using Angular 2.1.2 instead of 2.1.1 did fix these issues

When building with app scripts 0.0.43 I also get crtitical error:
[10:11:26] rollup failed: Could not resolve './app.module' from D:\Users\Rainson\Documents\Visual Studio 2015\Projects\Ionic2_sample37\src\app\main.dev.ts [10:11:26] ionic-app-script task: "build" [10:11:26] Error: Could not resolve './app.module' from D:\Users\Rainson\Documents\Visual Studio 2015\Projects\Ionic2_Sample37\src\app\main.dev.ts

[joergnigbur]

@morrisonbrett
Just tried your solution, works for me too!
Thanks!

[rajpat]

@rafaelcb21
Did you solve the Source map issue?
I am facing the same problem. I am using latest app (@ionic/app-scripts": "0.0.46") and dev environment is on Windows 7 OS .
I don't see the folder Users/... folder under file:// in chrome dev that @danbucholtz shared in one of his posts above.
Can any one help?

Here's my package.json

{
"name": "XXXX",
"author": "xxxxxx",
"homepage": "xxxxx",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build --dev",
"ionic:serve": "ionic-app-scripts serve",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"config": {
"ionic_bundler": "webpack",
"ionic_source_map": "source-map"
},
"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/platform-server": "2.1.1",
"@ionic/storage": "1.1.6",
"ionic-angular": "2.0.0-rc.3",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"ng2-idle": "1.0.0-alpha.18",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.46",
"typescript": "2.0.6"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "OilEntryApp: Aemes Oil Entry Application"
}

[morrisonbrett]

@rajpat Run > ionic build and paste the output to this ticket and I'll take a look.

[rajpat]

@morrisonbrett

Thanks for your response

Here's the output from > ionic build command

C:\Working\AEMES\Mobility\Client\OilEntryApp>ionic build

Running 'build:before' npm script before build
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.7.0
npm ERR! npm v3.10.3

npm ERR! missing script: build
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Working\AEMES\Mobility\Client\OilEntryApp\npm-debug.log

C:\Working\AEMES\Mobility\Client\OilEntryApp>

[morrisonbrett]

@rajpat You're having basic ionic issues, unrelated to this issue. One thing that I find is helpful is to remove the node_modules directory and run > npm install again.

[gotenxds]

@morrisonbrett This does not seem to work for me, I;m trying this on a clean Ionic project
called ionic start text --v2

indented all of the @component as you suggested and I still get this:

@danbucholtz Is there any progress in fixing this ? its been weeks since I last worked with Ionic because of this, and it seems I'm not the only one...
Its been like this ever since RC1 was released.

[morrisonbrett]

Try pressing Ctrl-P then type a name of a known .ts filename.

[gotenxds]

@morrisonbrett
Hi, In the picture i'm already in a known .ts file, the app component, I got to it from CTRL-P

how it looks in the browser:

and in the ide:

[danbucholtz]

@gotenxds,

Try this:
https://github.com/driftyco/ionic-app-scripts#tips
https://github.com/driftyco/ionic-app-scripts#overriding-config-values

Look at ionic_source_map. By default we use a cheaper eval source map because the build if faster. If you want a better map, it's possible but the build will be slower.

We are likely going to make some changes here in the coming weeks. Just need time to do it.

Thanks,
Dan

[JohnMcAvinue]

RC4 fixed the issues I was having with debugging

[matejuh]

@morrisonbrett
Thanks a lot, your workaround works. Shouldn't be created a special issue for that? This is blocker.

[olivermuc]

A few observation on an OSX env, using the latest app-scrips ([email protected]), and trying to debug in Safari (running the app in the iOS emulator):

"ionic_bundler": "rollup",
"ionic_source_map_type": "eval"

creates the source maps and I do get to see them in Safari. Which is cool, IF rollup didn't have huge issues with export/imports and breaks the build process more than it helps it.

Also I believe the money is on webpack. That said, this:

"ionic_bundler": "webpack",
"ionic_source_map_type": "source-map"

also creates a *.map file, BUT Safari is not picking it up. Any other value for
ionic_source_map_type
doesn't even build the map file.

Can someone confirm?..or is it just me? ...again ;-)

[danbucholtz]

@olivermuc,

ionic_source_map_type is pretty much only for Webpack. Rollup doesn't have the option to create different map types. We'll take a look at Safari.

Thanks,
Dan

[amandasaffer]

Just hopping in here to say that I'm having this issue when trying to build an Ionic app for ios, and @joergnigbur 's solution worked for me but @morrisonbrett 's did not. I'm not smart enough to know why. Maybe I missed a component somewhere, but I don't have that many. Heh.

[olivermuc]

Hey @danbucholtz , any updates/insights as to why Safari acts up?
Happy to provide more data if needed.

[danbucholtz]

@olivermuc,

No news. Lower priority for us right now since most devs develop on Chrome. We are open to a PR here. We're very focused on enabling better tree shaking and dead code removal.

Thanks,
Dan

[jeandat]

Hi @danbucholtz,

When reading your replies I understand the Ionic Team encourages people to work with ionic serve. I think this is wrong, very wrong.

In my job I see a lot of developers working in their browser most of the time : theirs apps are slow and provide a bad user experience.

Developing on real devices should be the norm and I CAN'T understand that you would focus and encourage people to work in the desktop.

You were speaking of Chrome Devtools. They are available on Android too notably via Crosswalk which provide recent Chrome Devtools on all supported platforms. This is very usable and I DON'T see any reason to develop (most of the time) in the browser instead of a real device.

Could you confirm me that Typescript sourcemaps work on real devices with ionic run and ionic run -l ? They don't seem to work for me with the super template and ionic-app-scripts 1.0.

Thanks Dan. Sorry to be negative but I thought it needed to be said and I would love to have your opinion on this.

[dbeylkhanov]

@jdat82 work in the desktop is more flexible and fastest way in most of cases

[danbucholtz]

@jdat82,

Yes, source maps work on devices by default. If you do a prod build, we disable source maps by default so the browser has less work to do.

Thanks,
Dan

[jeandat]

@beylkhanovdamir I agree with you but working faster is not the goal in itself. Our job is to deliver good mobile apps in production and I don't think working faster in your browser is helping reaching that goal. My purpose is to say that if they don't have time to focus on every thing they should target true device first.

@danbucholtz I'm not building for production

myapp (master) $ ionic run android

> ionic-hello-world@ ionic:build /Users/J2AN/Developer/Projects/Javascript/testing-ionic2/myapp
> ionic-app-scripts build

[16:36:47]  ionic-app-scripts 1.0.0
[16:36:47]  build dev started ...
[16:36:47]  clean started ...
[16:36:47]  clean finished in 8 ms
[16:36:47]  copy started ...
[16:36:47]  transpile started ...
[16:36:52]  transpile finished in 4.72 s
[16:36:52]  webpack started ...
[16:36:52]  copy finished in 5.22 s
[16:37:02]  webpack finished in 10.78 s
[16:37:02]  sass started ...
[16:37:04]  sass finished in 1.70 s
[16:37:04]  build dev finished in 17.25 s

[jmesa-sistel]

I use

 "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map"
  },

in package.json and
ionic run android -l
I can debug with VS Code using Codova Tools selecting "Attach to running android on device", but I have to use reconnect button in the debug palette when I do a change in the source to get my breakpoints working properly.

PS:
If you want to use console.log in VS Code there is a bug, but you can implement a workaround:
microsoft/vscode-cordova#201 (comment)
Read the next comments on how to fix console in VSCode

[radrad]

@jmesa-sistel Let me understand you debugging steps.
I understand at least in Visual Studio 2015 when you press run debug button the code execution will not stop at the typescript breakpoint upon first page loading, but you have to press reload in the browser (when testing in the browser). Are you saying that equivalent procedure to accomplish that withing mobile browser when testing in debug mode is to press reconnect?
What confused me you are saying you had to press reconnect when changing the source, but wouldn't you have to go again through compilation and run using "ionic run android -l". Why don't someone make a youtube video expaining Ionic 2 source code debugging with the latest Actionscript version in both destkop and mobile browser based hybrid mobile app so we can all unerstand.

[jmesa-sistel]

@radrad
No, I can stop on load a page, what I mean it is if I change the code then the ionic scripts regenerate the bundle & maps and send the files to the device because we are using -l, then the breakpoints can be misplaced so I have to reconnect to the device to resync the mapping, VS Code has that button, I donot know about VS 2015, I use VSCode with cordova tools extension only.

[radrad]

@jmesa-sistel Ok it is clear what you meant. Thanks.

[mobyjames]

Continue to get Cannot read property 'substr' of undefined unless I switch to rollup.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[olivermuc]

@danbucholtz

Just a quick update re: Safari & Source Maps; oddly enough, after upgrading to the latest and greatest xCode release + ionic - the default setup with webpack now works fine.

Since I haven't changed anything else, that's the only explanation I have, as all is good since.

[jackytse]

Don't write two or more classes in the same ts file.

[judsonmusic]

I encountered this issue tonight in Safari as well. My web app is not running correctly because Sarfi is looking for .map files and throwing 404's like crazy. What was the solution here?