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

Posted 2023-02-16

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

【英文标题】：How to debug angular application in Visual Studio Code not using chrome developer tools?

【发布时间】：2020-01-18 05:21:27

【问题描述】：

目前我正在使用 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

【参考方案1】：

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

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

【讨论】：

我在打字稿代码中使用了调试器语句。但我的意图不是使用 Chrome 开发人员工具，我仍然必须依赖它。