如何在不使用 chrome 开发人员工具的 Visual Studio Code 中调试 Angular 应用程序？

Question

目前我正在使用 Chrome 浏览器的开发人员工具进行调试，但这很不方便。在源选项卡中，它只显示 core.js、vendor.js、zone.js 等，而不是 typescript 文件。我必须添加控制台。日志，然后显示在控制台选项卡中，以及源打字稿文件，单击链接在源选项卡中打开源文件，我可以设置断点。 但我不想那样做。我想从 Visual Source Code 中做。当我打开文件夹时，它会自动在 .vscode 中创建一个 launch.json，如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
        "name": "Launch",
        "cwd": "${workspaceRoot}",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/index.js",
        "stopOnEntry": false,
        "args": [],
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "console": "internalConsole",
        "sourceMaps": false
    },
    {
        "name": "Attach",
        "type": "node",
        "request": "attach",
        "port": 5858
    }]
}

但是当我在调试模式下运行代码时，我无法设置任何断点，因为 VSC 告诉我“设置了断点但尚未绑定”并且基本上调试不起作用。 我已经在 VSC 中安装了 Chrome 扩展程序。我尝试添加 chrome 类型的启动配置，但效果如下：

{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
}

Angular 版本 7.1.0 Visual Studio 代码：1.41.1

Answer 1

您可以在 typescript 函数中使用 debugger 关键字。如果任何浏览器上的代码检查器打开，执行将在提到 调试器 的地方停止，您可以从那里手动逐行继续。

编辑：如果您这样做，请确保在应用程序进入暂存或生产环境之前删除所有调试器。