使用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-internal：///./src/styles.css-webpack：\\ src \\ styles.css（e：\\ code \\ folder \\ somefolder \\ fileupload \\ src \\ webpack：\\ src \\ styles .css）

还有更多类似的内容

Answer 1

注意：调试tsconfig.json中的打字稿文件> sourcemap应该设置为true

在chrome中有两种调试方法。1.使用请求“启动”和2.使用请求“附加”

方法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没问题，一旦更改了端口号4200（“ url”：“ http：// localhost：4200 ”），然后尝试调试。

使用Visual Studio Code进行调试的步骤，

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

在此处输入图片说明