Skip to content
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

VS Code chrome debugger not working with latest skeleton-typescript-webpack #852

Closed
ghiscoding opened this issue Aug 5, 2017 · 10 comments

Comments

Projects
None yet
3 participants
@ghiscoding
Copy link
Contributor

commented Aug 5, 2017

I'm submitting a bug report
I'm submitting a feature request

  • Aurelia Skeleton Version
    skeleton-typescript-webpack
  • Framework Version:
    major.minor.patch-pre

Please tell us about your environment:

  • Operating System:
    Windows 10

  • Node Version:
    8.2.1

  • NPM Version:
    5.3.0
  • Webpack
    webpack 3.3.0
  • Browser:
    Chrome 60

  • Language:
    TypeScript 2.4.2

Current behavior:
VS Code debugger does not work and adding a breakpoint says "breakpoint ignored because generated code not found (source map problem?)"

Expected/desired behavior:

  • What is the expected behavior?
    Expect to git clone latest skeleton-typescript-webpack and debug directly in Visual Studio Code (with chrome debugger extension installed).

  • What is the motivation / use case for changing the behavior?
    Debug TypeScript code directly in VSCode

@niieani niieani self-assigned this Aug 11, 2017

@ghiscoding

This comment has been minimized.

Copy link
Contributor Author

commented Aug 20, 2017

Any plans to fix it? I'd really like to eventually start using VSCode to debug, would be so much better to work with Aurelia.

@niieani

This comment has been minimized.

Copy link
Member

commented Aug 23, 2017

Hey @ghiscoding. I'm pretty busy lately, but I don't think the issue is very hard to solve. It's probably related to sourcemaps. If you manage to get it working yourself, let me know, otherwise I keep this on my backlog. Thanks for reporting.

@ghiscoding

This comment has been minimized.

Copy link
Contributor Author

commented Aug 24, 2017

@niieani could you please push a fix as described below (it's 1 line of code change).

So I really wanted this and I spent a few hours (and I mean a lot of hours) to understand how to troubleshoot this.
The change is simple enough, remove the ./src/ from the webpack override, see below for before & after code change:

before

"sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*"
}

AFTER THE FIX

"sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*"
}

For a full explanation on how to resolve this, we have some information from the site Github - VSCode Chrome Debug in the section sourcemaps they say

The debugger uses sourcemaps to let you debug with your original sources, but sometimes the sourcemaps aren't generated properly and overrides are needed. In the config we support sourceMapPathOverrides
... you can use the .scripts command (details below)

It took me a while to understand that the .scripts command must be run from the VSCode debug console (not directly from Chrome console like they incorrectly describe on their website). Having the entire set of scripts helps understand the mapping, and we can see (from the print screen) that in our case our sourcemaps all starts with webpack:///* (for example webpack:///welcome.ts) needs to be override or map to ${webRoot}/* and voilà! We now have a live debugger

debugger

@niieani

This comment has been minimized.

Copy link
Member

commented Aug 24, 2017

Awesome. I thought it would be something that simple. Would you like to file a PR? You can do this simple change by editing the file on GitHub directly (no need to clone/push locally).

@ghiscoding

This comment has been minimized.

Copy link
Contributor Author

commented Aug 24, 2017

First time in doing a PR for official Aurelia repo, let me know if there's anything to change. Thanks

@niieani niieani closed this in #856 Aug 24, 2017

niieani added a commit that referenced this issue Aug 24, 2017

@ghiscoding

This comment has been minimized.

Copy link
Contributor Author

commented Aug 24, 2017

@niieani so I thought that I should fix the other webpack version as well (esnext-webpack) but the fix for that one is different, not sure why though. The fix for that other skeleton is this (I had to run .scripts in console to find it):

"sourceMapPathOverrides": {
   "webpack:///src/*": "${webRoot}/*"
}

If we compare with the fix I made for typescript-webpack (which was to remove ./src/), on the esnext-webpack I had to remove only ./. Are the sourcemap in estnext configured differently in the webpack.config versus the typescript one? It might be better if you had a chance to try out the debugger on your side (unless @AshleyGrant has more time available)

@niieani

This comment has been minimized.

Copy link
Member

commented Aug 25, 2017

Thanks for investigating @ghiscoding. Perhaps VSCode debugging configuration is something we should implement into our CLI, since we'll be deprecating all the skeletons eventually.

@JeroenVinke would it be hard to include config generation into the CLI?

@JeroenVinke

This comment has been minimized.

Copy link
Member

commented Aug 25, 2017

No it should be pretty simple to do. If you could create an issue in the cli repo with the changes that you like to see then I can help

@ghiscoding

This comment has been minimized.

Copy link
Contributor Author

commented Aug 25, 2017

@JeroenVinke I haven't used the new Aurelia-CLI-Webpack yet but I can certainly try it and add a launch.json, if there isnt already, with a PR, is that enough for you to implement it?

@JeroenVinke

This comment has been minimized.

Copy link
Member

commented Aug 25, 2017

Definitely, it would be great to have this setup by default

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.