New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to generate proper ES6 -> ES5 sourcemaps in final output file. #6066

Closed
ankeshdave opened this Issue Jul 13, 2016 · 23 comments

Comments

Projects
None yet
@ankeshdave

I am trying to setup a dev environment for my team.
I am trying to debug ember-cli application using Visual Studio Code (Using Chrome debugging protocol)
The Microsoft/vscode-chrome-debug is able to connect to chrome tab(running the application) and its able to read the sourcemaps and i am able to setup breakpoints in actual source (/app/ folder).

Issue is the source map to source (Actual ES6 source- /app/) mapping is not correct hence the debugger is not able to step through on proper lines. ( See issue Microsoft/vscode-chrome-debug#193 for detail discussion).

This is my repository which has the proper setup/configuration to connect to VS code and debug.

Is there any configuration i am missing in ember-cli-build.js to generate proper sourcemaps relative to ES6 source files in /app/ folders.
Is there any why to generate proper sourcemaps by using a different plugin/transpiler/modifying pipeline etc...


Output from ember version --verbose:

ember-cli: 2.6.2
http_parser: 2.7.0
node: 6.3.0
v8: 5.0.71.52
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2h
os: win32 x64
@nathanhammond

This comment has been minimized.

Show comment
Hide comment
@nathanhammond

nathanhammond Jul 13, 2016

Contributor

@ankeshdave Have you been able to step through your source maps correctly inside of the Chrome inspector? I'd like to make sure that this is an issue with our generated source maps and not just inside of VS Code.

Contributor

nathanhammond commented Jul 13, 2016

@ankeshdave Have you been able to step through your source maps correctly inside of the Chrome inspector? I'd like to make sure that this is an issue with our generated source maps and not just inside of VS Code.

@nathanhammond

This comment has been minimized.

Show comment
Hide comment
@nathanhammond

nathanhammond Jul 13, 2016

Contributor

Also, it'd be easier for us to debug this if you used ember new my-demo-app so that we could identify exactly what changed in your version. (Keeping the Tomster commit.)

Contributor

nathanhammond commented Jul 13, 2016

Also, it'd be easier for us to debug this if you used ember new my-demo-app so that we could identify exactly what changed in your version. (Keeping the Tomster commit.)

@Turbo87

This comment has been minimized.

Show comment
Hide comment
@Turbo87

Turbo87 Jul 13, 2016

Member

@nathanhammond I think the issue is simply that we don't use sourcemaps at the moment due to performance reasons. From what I understand that is basically the reason why we are working on fast-source-map, to improve the performance impact and enable us to use sourcemaps.

Member

Turbo87 commented Jul 13, 2016

@nathanhammond I think the issue is simply that we don't use sourcemaps at the moment due to performance reasons. From what I understand that is basically the reason why we are working on fast-source-map, to improve the performance impact and enable us to use sourcemaps.

@ankeshdave

This comment has been minimized.

Show comment
Hide comment
@ankeshdave

ankeshdave Jul 13, 2016

@nathanhammond
The source displayed in chrome is similar but not same as of the actual ES6 File. Hence I believe the transpiled file (from ES6--> ES5)has a different sourceMap.

Also i did not get your comment about the Tommster Commit. As for the change in the demo project (My Repo)

  1. removed the getting-started node module from package.json
  2. create a component random-comments.js/.hbs
  3. Used this configuration to build the app ->ember-cli-build.txt

@roblourens Can you share your finding about how the sourceMaps are different (Issue Microsoft/vscode-chrome-debug#193)

@nathanhammond
The source displayed in chrome is similar but not same as of the actual ES6 File. Hence I believe the transpiled file (from ES6--> ES5)has a different sourceMap.

Also i did not get your comment about the Tommster Commit. As for the change in the demo project (My Repo)

  1. removed the getting-started node module from package.json
  2. create a component random-comments.js/.hbs
  3. Used this configuration to build the app ->ember-cli-build.txt

@roblourens Can you share your finding about how the sourceMaps are different (Issue Microsoft/vscode-chrome-debug#193)

@ankeshdave ankeshdave closed this Jul 13, 2016

@ankeshdave ankeshdave reopened this Jul 13, 2016

@stefanpenner

This comment has been minimized.

Show comment
Hide comment
@stefanpenner

stefanpenner Jul 13, 2016

Contributor

@ankeshdave as mentioned above, we basically explicitly disable those very granular source-maps for performance reasons. We hope to enable them in the future, but the hit was sufficiently high that we decided not to subject our community to it yet. Although we do have WIP to attempt to address.

Contributor

stefanpenner commented Jul 13, 2016

@ankeshdave as mentioned above, we basically explicitly disable those very granular source-maps for performance reasons. We hope to enable them in the future, but the hit was sufficiently high that we decided not to subject our community to it yet. Although we do have WIP to attempt to address.

@msmyers

This comment has been minimized.

Show comment
Hide comment
@msmyers

msmyers Sep 1, 2016

I would like to know the special sauce to opt-in to ES6 source maps. I understand that you have decided that they are too slow, but I'd like to make that decision for myself.

I have spent about 2 hours searching and trial/error for this config, and I have been unsuccessful.

msmyers commented Sep 1, 2016

I would like to know the special sauce to opt-in to ES6 source maps. I understand that you have decided that they are too slow, but I'd like to make that decision for myself.

I have spent about 2 hours searching and trial/error for this config, and I have been unsuccessful.

@nathanhammond

This comment has been minimized.

Show comment
Hide comment
@nathanhammond

nathanhammond Sep 2, 2016

Contributor

@msmyers For which of the three JS transforms we do do you want source maps? There are a tremendous number of moving pieces in this to get just right and being kinda wrong was worse than not trying.

https://github.com/ember-cli/ember-cli/blob/master/lib/broccoli/ember-app.js#L256

Contributor

nathanhammond commented Sep 2, 2016

@msmyers For which of the three JS transforms we do do you want source maps? There are a tremendous number of moving pieces in this to get just right and being kinda wrong was worse than not trying.

https://github.com/ember-cli/ember-cli/blob/master/lib/broccoli/ember-app.js#L256

@msmyers

This comment has been minimized.

Show comment
Hide comment
@msmyers

msmyers Sep 2, 2016

First of all, thank you so much for your response. Upon reading my message the next day, I realize that I was having a particularly frustrating day attempting to get my development environment and I apologize for being more negative than intended.

My ultimate goal is to have ES6 modules in chrome debugging. I've been able to get sourcemaps loaded as requirejs modules, but they are not in ES6.

I'd like to see a correlation between my ember-cli source code and chrome debuggable breakpoints.

    "ember-cli-babel": "^5.1.6",
    "broccoli-asset-rev": "^2.4.2",
    "broccoli-concat": "^2.3.4",

    // plus/minus many other libraries that I have found to trial and error through
    //ember-cli-build.js
    var app = new EmberApp(defaults, {

        babel: {
            compileModules: true,
            sourceMaps: true,
            whitelist: ['es6']
        },

        sourcemaps: {
            enabled: true,
            compileModules: true,
            extensions: ['js']
        },

        minifyJS: {
            options: {
                mangle: false,
                compress: false,
                compileModules: true,
                sourceMapIncludeSources: true, // defaults to true
                exclude: ["**/vendor.js"],
                sourceMapConfig: {
                    enabled: true,
                    compileModules: true,
                    extensions: ['js'] // defaults to [ 'js' ]
                }
            }
        }

    });

With that said, Ember has changed my career as a software engineer. Thank you all so much for your hard work on this incredible tool.

msmyers commented Sep 2, 2016

First of all, thank you so much for your response. Upon reading my message the next day, I realize that I was having a particularly frustrating day attempting to get my development environment and I apologize for being more negative than intended.

My ultimate goal is to have ES6 modules in chrome debugging. I've been able to get sourcemaps loaded as requirejs modules, but they are not in ES6.

I'd like to see a correlation between my ember-cli source code and chrome debuggable breakpoints.

    "ember-cli-babel": "^5.1.6",
    "broccoli-asset-rev": "^2.4.2",
    "broccoli-concat": "^2.3.4",

    // plus/minus many other libraries that I have found to trial and error through
    //ember-cli-build.js
    var app = new EmberApp(defaults, {

        babel: {
            compileModules: true,
            sourceMaps: true,
            whitelist: ['es6']
        },

        sourcemaps: {
            enabled: true,
            compileModules: true,
            extensions: ['js']
        },

        minifyJS: {
            options: {
                mangle: false,
                compress: false,
                compileModules: true,
                sourceMapIncludeSources: true, // defaults to true
                exclude: ["**/vendor.js"],
                sourceMapConfig: {
                    enabled: true,
                    compileModules: true,
                    extensions: ['js'] // defaults to [ 'js' ]
                }
            }
        }

    });

With that said, Ember has changed my career as a software engineer. Thank you all so much for your hard work on this incredible tool.

@nathanhammond

This comment has been minimized.

Show comment
Hide comment
@nathanhammond

nathanhammond Sep 2, 2016

Contributor

We don't actually have the ability to trace through all of our transforms right now to give you a single correct source map. Not to mention that it's slow. You're going to be hamstrung either way; I recommend just becoming familiar with doing the mental transformation back out. (It doesn't take too long before you stop noticing–I don't anymore.)

Not to say we don't want to make this better, but this is below my radar until we start updating our build process wherein we will revisit this story.

Contributor

nathanhammond commented Sep 2, 2016

We don't actually have the ability to trace through all of our transforms right now to give you a single correct source map. Not to mention that it's slow. You're going to be hamstrung either way; I recommend just becoming familiar with doing the mental transformation back out. (It doesn't take too long before you stop noticing–I don't anymore.)

Not to say we don't want to make this better, but this is below my radar until we start updating our build process wherein we will revisit this story.

@msmyers

This comment has been minimized.

Show comment
Hide comment
@msmyers

msmyers Sep 2, 2016

Thanks for your response.

This is not the response I was hoping for, but I understand, accept it, and move on.

Thank you for your time.

msmyers commented Sep 2, 2016

Thanks for your response.

This is not the response I was hoping for, but I understand, accept it, and move on.

Thank you for your time.

@nathanhammond

This comment has been minimized.

Show comment
Hide comment
@nathanhammond

nathanhammond Sep 2, 2016

Contributor

@msmyers But of course! Note that my "revisit this build story" is currently scheduled to start 10/1. We don't provide delivery dates for anything because open source, but investigation is starting soon™.

Contributor

nathanhammond commented Sep 2, 2016

@msmyers But of course! Note that my "revisit this build story" is currently scheduled to start 10/1. We don't provide delivery dates for anything because open source, but investigation is starting soon™.

@Turbo87

This comment has been minimized.

Show comment
Hide comment
@Turbo87

Turbo87 Feb 16, 2017

Member

@dwickern was this resolved by your PR?

Member

Turbo87 commented Feb 16, 2017

@dwickern was this resolved by your PR?

@dwickern

This comment has been minimized.

Show comment
Hide comment
@dwickern

dwickern Feb 16, 2017

Contributor

This is fixed in ember-cli v2.12.0-beta.1

To enable babel sourcemaps, add the following to your ember-cli-build.js:

var app = new EmberApp(defaults, {
    babel: {
      sourceMaps: 'inline'
    },
});
Contributor

dwickern commented Feb 16, 2017

This is fixed in ember-cli v2.12.0-beta.1

To enable babel sourcemaps, add the following to your ember-cli-build.js:

var app = new EmberApp(defaults, {
    babel: {
      sourceMaps: 'inline'
    },
});
@joukevandermaas

This comment has been minimized.

Show comment
Hide comment
@joukevandermaas

joukevandermaas Mar 8, 2017

For anyone else trying to find the PR referenced above, it's #6458.

For anyone else trying to find the PR referenced above, it's #6458.

@peabnuts123

This comment has been minimized.

Show comment
Hide comment
@peabnuts123

peabnuts123 May 18, 2017

I'm not seeing any change with babel: { sourceMaps: 'inline' } in my ember-cli-build (as suggested above). On ember-cli#2.13.0. function generator I am trying to debug is still a giant switch-case state machine. Am I missing something? ember-cli-build is pretty vanilla as far as I can tell. Have restarted ember server and things.

I'm not seeing any change with babel: { sourceMaps: 'inline' } in my ember-cli-build (as suggested above). On ember-cli#2.13.0. function generator I am trying to debug is still a giant switch-case state machine. Am I missing something? ember-cli-build is pretty vanilla as far as I can tell. Have restarted ember server and things.

@bjornharrtell

This comment has been minimized.

Show comment
Hide comment
@bjornharrtell

bjornharrtell Jun 15, 2017

Also unable to verify this and I'm getting sourcemap to the transformed source as reported by @peabnuts123 regardless of the sourceMaps: 'inline' setting. My ember -v output is:

ember-cli: 2.13.2
node: 6.11.0
os: linux x64

@Turbo87 would you consider reopening this issue?

Also unable to verify this and I'm getting sourcemap to the transformed source as reported by @peabnuts123 regardless of the sourceMaps: 'inline' setting. My ember -v output is:

ember-cli: 2.13.2
node: 6.11.0
os: linux x64

@Turbo87 would you consider reopening this issue?

@dwickern

This comment has been minimized.

Show comment
Hide comment
@dwickern

dwickern Jun 19, 2017

Contributor

@peabnuts123 @bjornharrtell The option was broken in the switch to ember-cli-babel which happened around ember-cli 2.12 or 2.13. I opened a fresh PR to fix it again babel/ember-cli-babel#158

Contributor

dwickern commented Jun 19, 2017

@peabnuts123 @bjornharrtell The option was broken in the switch to ember-cli-babel which happened around ember-cli 2.12 or 2.13. I opened a fresh PR to fix it again babel/ember-cli-babel#158

@Turbo87

This comment has been minimized.

Show comment
Hide comment
@Turbo87

Turbo87 Sep 17, 2017

Member

@dwickern I'm not sure what exactly is happening but this still (or again?) doesn't seem to work properly for me 🤔

"ember-cli": "^2.15.0",
"ember-cli-babel": "^6.8.2",

I'm still seeing the default sourcemaps even though I've set sourceMaps: 'inline'

Member

Turbo87 commented Sep 17, 2017

@dwickern I'm not sure what exactly is happening but this still (or again?) doesn't seem to work properly for me 🤔

"ember-cli": "^2.15.0",
"ember-cli-babel": "^6.8.2",

I'm still seeing the default sourcemaps even though I've set sourceMaps: 'inline'

@bjornharrtell

This comment has been minimized.

Show comment
Hide comment
@bjornharrtell

bjornharrtell Sep 17, 2017

Same for me as for @Turbo87. Assumed I was doing something wrong but perhaps not.

Same for me as for @Turbo87. Assumed I was doing something wrong but perhaps not.

@dwickern

This comment has been minimized.

Show comment
Hide comment
@dwickern

dwickern Sep 17, 2017

Contributor

Same issue here. I tracked it down to ef4/fast-sourcemap-concat#39

Contributor

dwickern commented Sep 17, 2017

Same issue here. I tracked it down to ef4/fast-sourcemap-concat#39

@Turbo87

This comment has been minimized.

Show comment
Hide comment
@Turbo87

Turbo87 Sep 17, 2017

Member

😞

thanks for tracking this down though!

Member

Turbo87 commented Sep 17, 2017

😞

thanks for tracking this down though!

@rstudner

This comment has been minimized.

Show comment
Hide comment
@rstudner

rstudner Jan 16, 2018

What is the functional difference in doing the above

    babel: {
      sourceMaps: 'inline'
    },

and the old canonical:

    'sourcemaps': {
      // enabled: EmberApp.env() !== 'production',
      enabled: true,
      extensions: ['js'],
    }

What is the functional difference in doing the above

    babel: {
      sourceMaps: 'inline'
    },

and the old canonical:

    'sourcemaps': {
      // enabled: EmberApp.env() !== 'production',
      enabled: true,
      extensions: ['js'],
    }
@erichonkanen

This comment has been minimized.

Show comment
Hide comment
@erichonkanen

erichonkanen Apr 23, 2018

I too am wondering what is the difference between the two declarations that @rstudner has described?

I too am wondering what is the difference between the two declarations that @rstudner has described?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment