调试用“创建的Angular应用程序”；dotnet新角度；在VSCode中不工作

根据“Chrome调试器”VSCode扩展的文档，角度代码调试应该是直接的

但是我不能让它工作

我使用

dotnet新angular-o主页创建了一个简单的默认应用程序，这是一个Web API+angular ASP.NET核心项目

我安装了扩展并配置了launch.json来触发调试：

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

使用
dotnet run
命令执行时，浏览器将打开并在端口5001上运行应用程序

然后在VSCode中，我选择了Debug，然后选择了“启动Chrome”选项并单击了Debug按钮（绿色箭头按钮），一个新的浏览器窗口打开了，但是我在angular应用程序（ClientApp）中设置的断点在VSCode中不会被点击

我还尝试使用“附加”选项进行调试，之前我为chrome快捷方式添加了“chrome.exe--远程调试端口=9222”。像以前一样运行应用程序，然后选择“附加到Chrome”选项进行调试，并单击调试按钮。这也不起作用，没有断点被击中

我做错了什么，或者这里有什么诀窍，为什么它不起作用？
这正是“Chrome调试器”扩展的文档所指示的

谢谢。
以下是开始调试所需的步骤：


在
VS code
中打开
ClientApp
根目录



确保安装了Chrome扩展的
调试器

运行
npm Run start
为应用程序提供服务。默认情况下，它将在
http://localhost:4200/
点击
F5
并选择
Chrome
生成默认的
launch.json



在
launch.json中
将端口更新为
4200

其内容应如下：

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


在
AppComponent
中为
title
变量设置断点
点击F5，应该点击断点


在您的情况下，问题可能是Angular CLI没有为应用程序提供服务。（
ng serve
未使用
npm run start
调用）端口
5001
上的服务器是基于
.NET
的后端，默认情况下，Chrome的
调试器无法与之配合

另一个问题可能是
VS code
未从角度应用程序的根打开。默认的
launch.json
设置包含
“webRoot”：“${workspaceFolder}”
，因此如果从.NET应用程序的根目录打开
VS code
，则不会命中断点。
以下是开始调试所需的步骤：


在
VS code
中打开
ClientApp
根目录



确保安装了Chrome扩展的
调试器

运行
npm Run start
为应用程序提供服务。默认情况下，它将在
http://localhost:4200/
点击
F5
并选择
Chrome
生成默认的
launch.json



在
launch.json中
将端口更新为
4200

其内容应如下：

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


在
AppComponent
中为
title
变量设置断点
点击F5，应该点击断点


在您的情况下，问题可能是Angular CLI没有为应用程序提供服务。（
ng serve
未使用
npm run start
调用）端口
5001
上的服务器是基于
.NET
的后端，默认情况下，Chrome的
调试器无法与之配合

另一个问题可能是
VS code
未从角度应用程序的根打开。默认的
launch.json
设置包含
“webRoot”：“${workspaceFolder}”
，因此如果从.NET应用程序的根目录打开
VS code
，则不会命中断点