如何在Visual Studio Code中调试Angular多项目工作区

迷迭香

如何使用VS Code-Debugger for Chrome在VSCode中调试Angular多项目工作区迁移到Angular多项目工作区后,调试不再起作用。如果设置了断点,则会收到以下消息。

设置断点但尚未绑定

我找到了有关该主题博客文章“ Angular Multi-Project Workspace的Visual Studio Code Breakpoints”我添加了以下内容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用正确的应用程序名称替换了,但仍然无法正常工作。

文件夹结构:

VSCode Angular多项目文件夹结构

谁能帮我解决这个问题?

迷迭香

我通过使用.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/*",
      },
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Visual Studio 2013中创建多项目模板?

如何在visual studio中调试python

如何在Visual Studio Code中调试Lua

如何在Visual Studio Code中调试Karma测试?

如何在Visual Studio Code(VSCode)中调试Cucumber?

如何在 Visual Studio 2017 中调试或跟踪 Angular 绑定?

如何在整个工作区中快速搜索文件(Visual Studio Code)

如何在Visual Studio Code中设置工作区文件夹?

如何在 Visual Studio Code 中添加另一个编码工作区

在Visual Studio Code中调试Scrapy项目

如何在Visual Studio Code中调试Angular2 TypeScript应用程序?

如何在Docker容器Visual Studio Code中调试Angular应用?

如何在 Visual Studio 中集成项目

什么是Visual Studio Code中的“工作区”?

如何在Visual Studio中更改“许可给”?

如何在Visual Studio中升级ReSharper?

如何在Visual Studio中包括OpenSSL

如何在Visual Studio中获取行号

如何在Visual Studio 2017中创建“带有自定义向导的多项目模板”

如何在Visual Studio Code(VSCode)上运行或调试php

如何在Visual Studio Code上调试Ruby代码?

如何在Visual Studio中调试独立的javascript?

如何在Visual Studio代码中调试打字稿文件

如何在Visual Studio 2013中调试QFixed

如何在Visual Studio中调试TypeScript单元测试?

如何在Visual Studio中调试单个线程?

如何在Visual Studio中调试Powershell模块

如何在Visual Studio 2013中以调试模式关闭ASSERT

如何在Visual Studio 2015 RC中调试JavaScript?