如何在 Visual Studio 代码中调试 Angular 多项目工作区
How can I debug an Angular multi-project workspace in Visual Studio Code
如何使用 VS Code - Debugger for Chrome 在 VSCode 中调试 Angular 多项目工作区?迁移到 Angular 多项目工作区后,调试不再有效。如果设置断点,我会收到以下消息。
Breakpoint set but not yet bound
我找到了 blog post about this topic: "Visual Studio Code Breakpoints for Angular Multi-Project Workspace"。我将以下内容添加到我的 launch.json
,我将 "webRoot": "${workspaceRoot}""
替换为 "webRoot": "${workspaceFolder}"
:
{
"name": "Launch new-app in Chrome against localhost (with sourcemaps)",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "/usr/bin/chromium-browser",
"runtimeArgs": [
"--disable-extensions"
],
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"/./*": "${webRoot}/projects/new-app/*",
"/src/*": "${webRoot}/projects/new-app/src/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*",
},
}
我也用正确的应用程序名称替换了 new-app
,但它仍然不起作用。
文件夹结构:
谁能帮我解决这个问题?
我通过使用 .scripts
命令找到 sourceMapPathOverrides
属性.
的正确路径来实现此功能
{
"name": "Launch editor in Chrome against localhost (with sourcemaps)",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "/usr/bin/chromium-browser",
"runtimeArgs": [
"--disable-extensions"
],
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/projects/apps/editor/*",
"webpack:///./src/*": "${webRoot}/projects/apps/editor/src/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*",
},
}
在我的例子中,Angular 9 的多项目工作区(因此使用 Ivy 和 AOT)我必须将 webroot
设置到我捆绑脚本的位置(使用 *.js.map 文件)所以它是:"webRoot": "${workspaceFolder}/MyWebProj/wwwroot"
.
感谢 .scripts
能够列出所有路径无效的文件。
所以在那之后我不得不简单地调整 sourceMapPathOverrides
中的路径。路径应相对于 webroot
.
{
"name": "App Debug",
"type": "chrome",
"request": "launch",
"url": "http://localhost:50120/",
"webRoot": "${workspaceFolder}/MyWebProj/wwwroot",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/../src/*",
"webpack:///../CommonWeb/*": "${webRoot}/../../CommonWeb/*",
"webpack:///../node_modules/*": "${webRoot}/../../node_modules/*"
}
}
我正在使用 angular 10 个工作区与应用程序和库,但我在我的库中设置断点时遇到了问题。
我需要告诉“ng serve”包含供应商源地图...
在项目/“my-app”/建筑师/“服务”/选项下的“angular.json”添加一个“sourceMap”对象:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": true
}
},
ng build my-library
ng serve my-app
launch.json
:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "my-app",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/projects/my-app",
"sourceMaps": true,
}
]
}
如何使用 VS Code - Debugger for Chrome 在 VSCode 中调试 Angular 多项目工作区?迁移到 Angular 多项目工作区后,调试不再有效。如果设置断点,我会收到以下消息。
Breakpoint set but not yet bound
我找到了 blog post about this topic: "Visual Studio Code Breakpoints for Angular Multi-Project Workspace"。我将以下内容添加到我的 launch.json
,我将 "webRoot": "${workspaceRoot}""
替换为 "webRoot": "${workspaceFolder}"
:
{
"name": "Launch new-app in Chrome against localhost (with sourcemaps)",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "/usr/bin/chromium-browser",
"runtimeArgs": [
"--disable-extensions"
],
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"/./*": "${webRoot}/projects/new-app/*",
"/src/*": "${webRoot}/projects/new-app/src/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*",
},
}
我也用正确的应用程序名称替换了 new-app
,但它仍然不起作用。
文件夹结构:
谁能帮我解决这个问题?
我通过使用 .scripts
命令找到 sourceMapPathOverrides
属性.
{
"name": "Launch editor in Chrome against localhost (with sourcemaps)",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "/usr/bin/chromium-browser",
"runtimeArgs": [
"--disable-extensions"
],
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/projects/apps/editor/*",
"webpack:///./src/*": "${webRoot}/projects/apps/editor/src/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*",
},
}
在我的例子中,Angular 9 的多项目工作区(因此使用 Ivy 和 AOT)我必须将 webroot
设置到我捆绑脚本的位置(使用 *.js.map 文件)所以它是:"webRoot": "${workspaceFolder}/MyWebProj/wwwroot"
.
感谢 .scripts
能够列出所有路径无效的文件。
所以在那之后我不得不简单地调整 sourceMapPathOverrides
中的路径。路径应相对于 webroot
.
{
"name": "App Debug",
"type": "chrome",
"request": "launch",
"url": "http://localhost:50120/",
"webRoot": "${workspaceFolder}/MyWebProj/wwwroot",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/../src/*",
"webpack:///../CommonWeb/*": "${webRoot}/../../CommonWeb/*",
"webpack:///../node_modules/*": "${webRoot}/../../node_modules/*"
}
}
我正在使用 angular 10 个工作区与应用程序和库,但我在我的库中设置断点时遇到了问题。
我需要告诉“ng serve”包含供应商源地图...
在项目/“my-app”/建筑师/“服务”/选项下的“angular.json”添加一个“sourceMap”对象:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": true
}
},
ng build my-library
ng serve my-app
launch.json
:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "my-app",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/projects/my-app",
"sourceMaps": true,
}
]
}