Skip to content
This repository has been archived by the owner on Feb 27, 2019. It is now read-only.

Unable to debug the app: Webpack & ES2015 (ES6) #129

Closed
vucalur opened this issue Sep 18, 2016 · 1 comment
Closed

Unable to debug the app: Webpack & ES2015 (ES6) #129

vucalur opened this issue Sep 18, 2016 · 1 comment

Comments

@vucalur
Copy link

vucalur commented Sep 18, 2016

Debugging doesn't stop at any breakpoint in transpiled sources.
Tested on Chromium (Chrome Dev Tools) and Firefox (Firebug).

.yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "0.7.2",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "babel",
      "ci": [],
      "css": "scss",
      "resolved": "/home/vucalur/npm/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "todoMVC",
      "router": "uirouter"
    }
  }
}

I was able to reproduce it for "framework": "angular2" as well.
Was happening on generator's 0.6.0 version too.

Even inserting debugger; statement doesn't work properly:
Unlike with inserting a breakpoint in dev tools, execution stops at debugger;.
However, it looks like source map is screwed and you don't see the actual line with the statement.

Here how it looks on todoMVC:

  • debugger; statement is the 1st line of handleSave() in Header.js?eb22.
  • Execution stops at some weird place in some ?d41d auxiliary file.
  • Scope and the method name at the top of the Call Stack (handleSave) are ok though.

2016-09-18-125748_1084x749_scrot_

For following choices (.yo-rc.json) debugging works fine - tested myself:

  • bower, Pure old JavaScript
  • webpack, Pure old JavaScript
  • webpack, TypeScript
  • systemJS, ES2015
@vucalur
Copy link
Author

vucalur commented Sep 18, 2016

Fix - short

Just change devtool: 'cheap-module-eval-source-map' to devtool: 'source-map' in 2 files:

  • conf/webpack.conf.js
  • conf/webpack-test.conf.js

Fix - long

I was already able to figure it out by myself.
Posting the solution anyway - I hope I'll save you some hours.

Here's the commit fixing this: FountainJS/generator-fountain-webpack@04809fe
The fix is just 3 days old, so you'll have to apply it manually, since it's not included in any release yet.

For an app in typescript ("js": "typescript" in .yo-rc.json) config files also contain infamous devtool: 'cheap-module-eval-source-map', however debugging works ok.
I advise applying the fix for TS anyway.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant