使用VsCode调试Angular5 - 忽略断点

Question

我正在尝试调试使用Angular5构建的Web应用程序但是当我运行调试器（F5）时它只是忽略它（Breakpoit被忽略，因为找不到生成的代码（源映射问题？））。我的launch.json看起来像这样：

{
"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}"
  }
  ]
}

当我跑.scripts我得到 的WebPack内部：///./src/styles.css     - webpack：\ src \ styles.css（e：\ code \ folder \ somefolder \ fileupload \ src \ webpack：\ src \ styles.css）

以及更多像这样的行。

Answer 1

注意：调试typescript文件在tsconfig.json＆gt; sourcemap应设置为true

在chrome 1中有两种调试方式。通过请求＆＃39;启动＆＃39; 2.请求＆＃39;附加＆＃39;

方法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 

方法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：我更喜欢方法2，它易于运行。

希望有所帮助

Answer 2

你的launch.json没有问题，一旦更改（“url”：“http://localhost:4200”）端口号4200并尝试调试。

使用Visual Studio代码进行调试的步骤

1）键入Ctrl + Shift + F并安装Chrome扩展程序 2）将调试器放入代码中，单击Ctrl + Shift + D.在调试中点击播放动作（绿色按钮，你可以在下面的图像中看到） 3）Pop将在新窗口中打开。

enter image description here