webpack 如何使用VSCode调试Angular ？

lnxxn5zx  于 2023-01-26  发布在  Webpack
关注(0)|答案(9)|浏览(183)

如何配置Angular和VSCode以使断点工作？

webpack

9条答案

按热度按时间
bmp9r5qi

bmp9r5qi1#

使用Angular 5/CLI 1.5.5进行测试

1.安装Chrome Debugger Extension
1.创建launch.json（在. vscode文件夹内）
1.使用我的launch.json（见下文）
1.创建tasks.json（在. vscode文件夹内）
1.使用我的tasks.json（见下文）
1.按CTRL + SHIFT + B组合键
1.按F5
launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

使用Angular 2.4.8进行测试

1.安装Chrome Debugger Extension
1.创建launch.json
1.使用我的launch.json（见下文）
1.启动NG实时开发服务器（ng serve）
1.按F5
launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}
赞(0）分享  回复(0）举报  2023-01-26
pcww981p

pcww981p2#

看起来VS代码团队正在存储调试方法。
https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}
赞(0）分享  回复(0）举报  2023-01-26
s5a0g9ez

s5a0g9ez3#

有两种不同的方法，你可以 * 启动 * 一个新的流程或者 * 附加 * 到一个现有的流程。
这两个过程中的关键点是同时运行 *webpack开发服务器和VSCode调试器 *。

启动进程

1.在launch.json文件中添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

1.通过执行npm start从Angular CLI运行Webpack开发服务器
1.转到VSCode调试器并运行“Angular 调试会话”配置。这样，将打开包含应用程序的新浏览器窗口。

附加到现有进程

1.为此，您需要在调试器模式下运行Chrome，并打开端口（在我的例子中，端口为9222）：
麦克：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

窗口：

chrome.exe --remote-debugging-port=9222
  1. launch.json文件的外观如下所示：
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}

1.通过执行npm start从Angular CLI运行Webpack开发服务器
1.选择“Chrome Attach”配置并运行它。
在这种情况下，调试器附加到现有的Chrome进程，而不是启动一个新窗口。
我写了自己的文章，用插图描述了这种方法。
Simple instruction how to configure debugger for Angular in VSCode

赞(0）分享  回复(0）举报  2023-01-26
kupeojn6

kupeojn64#

Visual Studio代码站点对此进行了详细解释：https://code.visualstudio.com/docs/nodejs/angular-tutorial

赞(0）分享  回复(0）举报  2023-01-26
2j4z5cfb

2j4z5cfb5#

可以使用此配置：

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}
赞(0）分享  回复(0）举报  2023-01-26
1tuwyuhd

1tuwyuhd6#

@Asesjix的回答非常透彻，但正如一些人所指出的，仍然需要多次交互才能启动ng serve，然后在Chrome中启动Angular应用程序。我使用以下配置单击一下就可以完成此操作。与@Asesjix的主要区别是的答案是任务类型现在是shell，并且命令调用在ng serve之前添加start，因此ng serve可以存在于其自己的进程中，并且不会阻止调试器启动：

任务.json：

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

启动.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}
赞(0）分享  回复(0）举报  2023-01-26
gcxthw6b

gcxthw6b7#

这里是一个有点轻的解决方案，工程与Angular 2+（我用Angular 4）
如果运行平均值堆栈，还添加了Express服务器的设置。

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}
赞(0）分享  回复(0）举报  2023-01-26
zsohkypk

zsohkypk8#

在我的例子中，我没有使用原始的Angular项目文件夹树，我知道webRoot/{workspaceFolder}位有问题，但我所有的实验都没有结果。从另一个SO答案中得到了一个提示，如果我再找到它，我会链接它。
帮助我的是在运行时找到变量{workspaceFolder}的内容，然后将其修改到“app/*"所在的“src”文件夹中，为了找到它，我向launch.json文件添加了一个preLaunchTask，并添加了一个输出{workspaceFolder}值的任务。

launch.json，安装Chrome调试器后出现

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json默认情况下不存在。按Ctrl+Shift+p，我认为它被称为“为其他命令创建任务”或类似的东西。创建tasks.json后似乎看不到它。您也可以在launch.json的相同位置创建该文件

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

一旦我知道了${workspaceFolder}的值，我就将它固定为指向我的新项目树中的src文件夹，这一切都工作了。调试要求ng serve已经作为预启动任务或作为构建的一部分（上面的示例）或在命令提示符中运行。
Here是指向所有可用变量的链接：

赞(0）分享  回复(0）举报  2023-01-26
gk7wooem

gk7wooem9#

对于那些已经阅读了以上所有内容并且没有将其作为工作的人，请通过ng version检查您的Angular和Node.js版本（在您的项目文件夹中）。
它应该输出版本：

如果您的Angular version = 15和Node.js = 18，则您有另一个问题。There您可以找到解决方案（我花了1天时间来解决）

赞(0）分享  回复(0）举报  2023-01-26
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com