Debugging an Ember application

Can you debug your Ember application with Chrome dev tools, for example? As far as I can see, with default Ember cli configuration it's not possible - there is no way to map original ES6 files to the transpiled+concatenated code being executed, source maps produced only allow mapping transpiled files (embedded in .map file) to the merged <emberapp>.js. ES6 sourcemaps support is still in progress (https://github.com/ember-cli/ember-cli/issues/4528)

Yes, there is no problem.

OK, so I wait for the ES6 sourcemaps support and use Angular.

Just to clarify: is proper source maps the only thing preventing us from debugging inside of the IDE?

Yes, as far as I can tell

Following te above, I understood that issue 4528 is closed, hence solved.

I am a regular Webstorm user both developing Ember apps as well as ordinary apps using Typescript. The Typescript app I can debug and works fine.

But I can't find any clue why my Ember app is not stopping on break points. I have installed the Ember.js plug-in in Webstorm and I have installed the Jetbrains IDE support in Chrome,

I started the Emer server on port 4203 en start the debug in Webstorm on localhost port 4203 browser Chrome. The Chrome browser start and indicates that the JetBrains IDE Support locates the error in this browser. The console output appears in my Webstorm debugger console.

So far so good.

But it doesn't stop in any break point!!

What am I doing wrong????

Debugging straight away in Chrome itself does work and maps the sources correctly. But I do want to do the debugging in Webstorm. Can somebody help me please?

@Hdehaan have a look at https://github.com/Turbo87/intellij-emberjs/pull/109. you might need to enable the full sourcemaps option (see https://github.com/ember-cli/ember-cli/pull/6458) for it to work.

Thanks for the answer. I made a symboloc link assets/my-app to app and I see now a list of scripts of all of my js files,

and a body.emper-application in elements. In this body and element refers to <script src=assets/{script name}.js>

However, this script name is not physically located in this assets dir. Therefore I need the mapping. And I do not understand from your reference how to enable this full mapping..

Is it correct that I have to enter: sourceMaps = 'inline'?

And if so, where do I have to place this statement?

I spent a few hours on this last night. I'm a long time ember and Intellij user. I'd really like to see full official support, especially debugging tests, which i think means supporting testem as a test runner. I tried to get karma working, but failed due to es6 syntax, i think it needed browserify enabled but my knowledge of js build tools is limited.

For full official support, please vote for https://youtrack.jetbrains.com/issue/WEB-14919

>I tried to get karma working, but failed due to es6 syntax, i think it needed browserify enabled but my knowledge of js build tools is limited.

Yes, you need using either browserify or webpack, or use module loaders like systemjs or requirejs to deal with modules, as they are not supported natively by the browsers (and karma runs in browser)

see https://x-team.com/blog/setting-up-javascript-testing-tools-for-es6/, http://busypeoples.github.io/post/testing-workflow-with-es6/,

https://youtrack.jetbrains.com/issue/WEB-14919   has been closed and brushed off to the plugin developper, I guess there is no hope for this any time soon.

Sorry for belated response, just wanted to mention that I've managed to get debugging work:

To do this, I had to enable sourcemaps in ember-cli-build.js per instructuions at https://github.com/babel/ember-cli-babel#enabling-source-maps:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    babel: {
      sourceMaps: 'inline'
    }
...

That's all, nothing else is required. Note: I'm using 2018.3.2 RC

@elena, what debug configuration are you using? I am connected to the debugger but I am not stopping at any breakpoint :( I can see the console output but not luck with the breakpoints

JavaScript Debug - nothing extraordinary:

@elena, would you mind posting your package.json file?  I'm in the same state as Thomas, and would like to see the versions of ember-cli, ember-cli-babel, etc that you are using to successfully debug.  I'm jealous.

Here you are:

 "devDependencies": {
    "broccoli-asset-rev": "^2.4.5",
    "ember-ajax": "^3.0.0",
    "ember-cli": "~3.1.4",
    "ember-cli-app-version": "^3.0.0",
    "ember-cli-babel": "^6.6.0",
    "ember-cli-dependency-checker": "^2.0.0",
    "ember-cli-eslint": "^4.2.1",
    "ember-cli-htmlbars": "^2.0.1",
    "ember-cli-htmlbars-inline-precompile": "^1.0.0",
    "ember-cli-inject-live-reload": "^1.4.1",
    "ember-cli-qunit": "^4.1.1",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^2.0.0",
    "ember-data": "~3.1.0",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^1.0.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-resolver": "^4.0.0",
    "ember-source": "~3.1.0",
    "ember-welcome-page": "^3.0.0",
    "eslint-plugin-ember": "^5.0.0",
    "loader.js": "^4.2.3"
  },
  "engines": {
    "node": "^4.5 || 6.* || >= 7.*"
  }