SourceMap mapping webpack to wrong file location in VSCode Debug #2453
Comments
|
Thanks to your comment I finally succeeded in debugging an angular-cli (1.0.0-beta.16 with webpack) generated app in vscode. You need to remap Here's my lauch.json:
Hope this helps. |
|
@sdiprizio Thanks, it seems to be detecting the source maps for the bundle now. Although, it still can't hit a single breakpoint in VSCode. |
|
Thanks @sdiprizio this works for me. @yuri1969 I found I needed to make sure I only had one chrome tab open for this to work. |
|
@sdiprizio Thanks! After mapping wepack to the correct location I was able to hit break points when navigating to different areas my site. I thought I'd note though that I had to change the override to map like this: "sourceMapPathOverrides": { |
|
OK, the key was analysis of the You have to tweak the
It seems the problem, in my case, are Windows path delimiters vs. URL ones. The webpack path looks like: My final setup: |
|
The file vscode-chrome-debug.txt isn't generated in my case at that directory, but applying the launch.json @sdiprizio wrote, it worked for me. And I also had to make sure I only had one chrome tab open for this to work, like @duncanhunter |
|
In Windows with is enough. Also I recommend add: And change the WebRoot Another tip Now the message "Chrome didn't shut down correctly" will be disabled |
|
@rodries were you able to get this to work with webpack-dev-server? |
|
@cgatian if you mean "ng serve" command then yes. |
|
Great investigation work everyone! This has been an outstanding issue for a while now so I appreciate the effort that has gone into figuring out solutions. The override seems to work, but if this is fixable within the CLI we'd like to do it. Off the top of my head it sounds like a VSCode Chrome debugger problem because:
In this issue https://github.com/Microsoft/vscode-chrome-debug/issues/158 there seem to be reports of stuff 'just working', so I wonder is something is amiss on the CLI's end. |
|
Some additional info about caching: I can get debugging working for a project as per rodries post above. But if I then attempt to debug a different project then VS Code will try to reference the sourcemaps from the first project. Using the debug output I have found these symbols are cached at the following path: %TEMP%\com.microsoft.VSCode\node-debug2\sm-cache I need to delete this folder before I can then successfully debug the second project. If I want to debug the first project again, I have to again delete the above sm-cache folder. |
|
@aconsolati You are right, I have a script to delete temp folder, I have to clean the %TEMP% folder when I change to another project. It will be great to create an issue about this problem in https://github.com/Microsoft/vscode-node-debug2/issues |
filipesilva
changed the title
|
I'm not able get this working. I added this as escribed earlier
to launch,json, but when I try to set a breakpoint I get a warning Edit: noticed the comment about caching. I have to delete the cache each time any change is made to the current project (not just when switching project). If I do that and reconnect the debugger, then I am able to set and hit breakpoints.
Is this not specific to using ng-cli / webpack combination, as I never have had this issue with angularJs / TS? |
|
Just letting people know, I still wasn't able to get this to work on a Mac, using the latest versions of everything and a vanilla sample app. A step-by-step with a single correct config file would be much appreciated. I've never gotten VSCode Chrome debugging working well and have usually fallen back to jasmine SpecRunner and debugging in the browser instead. I'm not sure I can get that running here either (#2853 asks for it). As of this minute I can't debug, though I was able to get wallaby running fine using their example (wallabyjs/ngCliWebpackSample). |
|
@maxime1992 @spicemix @filipesilva Can confirm that the config below works fine for me with I've also added the {
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"diagnosticLogging": true,
"webRoot": "${workspaceRoot}/src/app",
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"diagnosticLogging": true,
"webRoot": "${workspaceRoot}/src/app",
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
}
]
}
|
|
As of @krueger71's last comment, I'm going to consider this fixed for now. If not, please comment here and make sure to mention me as well as the current state with beta 19-3. |
|
@tebeco works for me using last angular-cli My actual working config: |
…athOverrides in launch.json in order to allow debugging with vs code chrome debugger: angular/angular-cli#2453
|
I have just used @jmesa-sistel 's example. If I run my app with
|
|
@georgeedwards did you try with the second comment of this thread? It worked for me in Linux and Windows |
|
EDIT: "--ssl on" option for "ng serve" seems to break the downloading of the bundle/map files for vscode. Works fine without that. EDIT2: For attach to work had to change chrome launcher link to include (only open 1 tab): Not working fully for me (source maps not loading, can't trigger breakpoints): See log complaints about map files not loading. (same results with: { Log output: |
|
@mightypenguin same for me (source maps not loading, can't trigger breakpoints): have tried every permutation of launch.json configuration listed on this thread. No luck... |
|
i'm facing the same issue as @georgeedwards, running ng serve, then attaching works, but cannot add breakpoints. any other workarounds? |
|
angular-cli: 1.0.0-beta.24 Both of these VSCode debugger launch configs worked for me: NOTES:
|
|
Unfortunately it doesn't work for me.. Launch partially works by attaching but doesn't see the sourcemaps. Attach doesn't work at all. Appreciate any help Here is the package.json: and here is the launch.json: |
|
just want to mention that with current version I have still to delete the %temp% folder on win64 to get the breakpoints working correct |
|
Having the same issue with latest version of Angular CLI, Issues seems to still exist, I needed to use the custom launch.json and not the automatically created version as mentioned above by kiranj321 |
|
Got the breakpoints hitting in Angular TypeScript files of basic CLI project with the latest stable versions as of 04/Mar/2017:
Notes:
|
|
Working on: OS : Arch Linux(4.9.11-1-ARCH) |
|
In Ubuntu 16.10 |
|
For anyone still having this issue, add the Just search for the name of one of your project's source files in there. You'll see if the path mapping between the webpack URL and on-disk source files is right or not. Looking at the mapping, I saw that the extension was trying to read source files from my Armed with that new knowledge, I ended up using this to "go back" to my workspace root, which worked perfectly: Just make sure to use |
|
anyone got this to work on OSX? |
|
Lucky one here. On Windows 10, ng-cli, webpack & Chrome hitting breakpoints, live reloading... essentially all stuff you get working with the CLI plus full debugging experience with VS Code.
My {
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome with ngCli@4200",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"sourceMapPathOverrides": {
"webpack:///C:*":"C:/*"
},
"userDataDir": "C:\\temp\\chromeDummyDir",
"runtimeArgs": [
"--disable-session-crashed-bubble",
"--disable-infobars"
]
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
/*"diagnosticLogging": true,*/
"webRoot": "${workspaceRoot}/src",
"url": "http://localhost:4200/*",
"sourceMapPathOverrides": {
"webpack:///C:*":"C:/*"
}
}
]
}This is @rodries configuration suggestions. The only thing that isn't working are the crashed bubbles and infobars arguments for Chrome. The thing still says that Chrome didn't shut down properly and stuff like that (in my case it even suggests to translate, i don't care putting the args for that). Everything works. Everything Angular CLI does works great: live reloading, webpack, etc. When running this configuration i was already running
Hope this awesome magic trick doesn't fade away with a new update. |
|
I have adopted Breakpoints seem to work, but I still get the following lines: |
|
I'm with the same problem. I'm using the "trace" config and the configuration is like: And, in the debug file i'm having a lot of messages of this type: Anyone can help? |
|
In my case the problem was caused by the backward slash after webpack. |
|
@andresbm05 's solution fixed it for me as well! |
|
In my case, the configuration for launch was set right but my code still wasn't hitting the breakpoints. Simply ran 'ng build' before hitting 'npm run localhmr' on my angular project to get into debug mode. |
|
To make breakpoints work in @angular/cli library projects, I had to configure the launch like this: BTW, I use scoped packages: @SCOPED_PACKAGE_NAME/PROJECT_NAME |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
and others
OS: Windows 10
angular-cli: 1.0.0-beta.16
node: 6.7.0
When creating a new project using the angular-cli and attempting to debug, none of the breakpoints I am setting are being hit. After looking into the log file for the debugger I have found that webpack is mapping to the wrong source location. I have listed repro steps along with the location of a log file, my launch configurations and an example of what I am seeing when I say that webpack is mapping to the wrong location. I was hoping someone had some insight into why this is happening.
Repro steps:
Example from the log (entire log file attached):
vscode-chrome-debug.txt
SourceMap: mapping webpack:///C:/Users/pderks/Desktop/test-app/src/app/app.component.ts => c:\Users\pderks\Desktop\test-app\C:\Users\pderks\Desktop\test-app\src\app\app.component.ts
**Notice that the path c:\Users\pderks\Desktop\test-app is appearing twice.
Launch configurations:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"diagnosticLogging": true,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
The text was updated successfully, but these errors were encountered: