Debugging Angular5 with VsCode - Ignores breakpoints

Question

I am trying to debug a web app built with Angular5 but when I run the debugger (F5) it just ignores it (Breakpoit ignored because generated code not found (source map problem?)). My launch.json looks like this:

{
"version": "0.2.0",
"configurations": [
  {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
  },
  {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
  }
  ]
}

When i run .scripts i get webpack-internal:///./src/styles.css - webpack:\\src\\styles.css (e:\\code\\folder\\somefolder\\fileupload\\src\\webpack:\\src\\styles.css)

and many more lines like this one.

Answer 1

Note: To Debug typescript files In tsconfig.json > sourcemap should be set to true

There are two ways of debugging in chrome 1. With request 'launch' and 2. With request 'attach'

Method 1:

1. Create a new folder in E called " chrome-dev-profile" 

    2. And create a new chrome shortcut and set the target as  "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=‪E:\chrome-dev-profile" 
    3. Now go to vscode > debug > Launch chrome against configuration > select attach and in the launch.json 
 4. in the json add the userDataDir property and set url to localhost:4200 

    5. Type ng serve 
    6. Go to debug and run 
https://github.com/Microsoft/vscode-chrome-debug 
    7. Select sources and u could see the dev-server web pack like below 

Method 2:

1. Once the extension is installed 
2. Debug > chrome > launch.json > select launch 
3. Change url to : localhost:4200 
4. Run "ng serve" 

5. Set the breakpoints > Debug > press the play button 

PS: I prefer method 2 which is easy to run.

Hope it helps

Answer 2

There is no problem with your launch.json, once change ("url":" http://localhost:4200 ") the Port number 4200 and try debugging .

Steps to debug using Visual Studio Code,

1) Type Ctrl+Shift+F and install Chrome extension 2) Place debugger in code click Ctrl+Shift+D. click on play action(green color button which you can seen in below image) in debug 3) Pop will open in new window.

enter image description here