• 技术文章 >开发工具 >VSCode

    详解VSCode调试Angular程序的方法

    青灯夜游青灯夜游2021-06-18 18:15:01转载496
    本篇文章给大家介绍一下vscode中调试Angular程序。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    准备工具

    在 VS Code 中安装 Debugger for Chrome 插件。

    Debugger for Chrome

    推荐学习:《vscode教程》、《angular教程

    配置 lanch.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",
          "sourceMaps": true,
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceRoot}"
        }
      ]
    }

    配置完成后,在 Angular 工程目录输入命令 ng serve 启动项目,然后就可以打断点调试了。

    调试

    在 VS Code 中按 F5 进入调试模式,打开 Chrome 刷新页面,就进入断点。

    更多编程相关知识,请访问:编程视频!!

    以上就是详解VSCode调试Angular程序的方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:VSCode Angular
    上一篇:10个值得收藏的VSCode插件(推荐) 下一篇:推荐二十七个vscode有用插件,一起安装吧!
    大前端线上培训班

    相关文章推荐

    • 分享13个实用VSCode插件,让你写代码不再头疼!!• 22个提升Web开发速率的VSCode插件(值得收藏)• Angular10如何配置webpack打包?方法介绍• 深入了解Angular中的Component组件• Angular开发者必须学习的19件事• 10个值得收藏的VSCode插件(推荐)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网