zoukankan      html  css  js  c++  java
  • 在VS CODE中调试Angular代码

         Chrome Dev Tools 可以调试js程序,但是可能需要和源码之间来回切换。

         如果是使用VS CODE来开发Angular,可以直接在VS CODE中调试。

         按照如下的步骤即可:

         第一步,  安装Debugger for Chrome。  同时可以选择安装中文插件,可以将IDE的菜单汉化

         第二步,  项目根目录下如果没有自动创建.vscode/launch.json,可以在项目根目录下手动创建 .vscode/launch.json,内容如下:

    {
        // 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": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome with ng serve",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceRoot}"
            }
        ]
    }

         ${workspaceRoot}可以写成项目的根目录。例如D: empangluartest。   VS CODE同时引入多个工程的代码时,${workspaceRoot}要写成对应工程的根目录。

         第三步,启动工程,npm start。  在VS CODE按F5进入调试状态,最后打开 Chrome 输入调试工程对应的url,会直接在 VS CODE 中进入断点。

          还有一点需要注意的是,不要在F5打开的chrome中再设置断点用F12调试,否则调试时VS CODE和chrome都会进入,调试不方便。

           vscode中加入了多个前端工程时,除了需要配置每个工程的launch.json。还需要选择对应的工程后,再按下F5进行调试。

            

  • 相关阅读:
    【算法研究】排序算法
    20121031 学习心得与体会
    循环有序数组查找(log(n))
    XmlDocument创建XML文档
    GCC地址对齐的2个方法
    打印getaddrinfo()返回的地址信息
    Java单例模式
    二叉搜索树的例子BST
    XmlTextWriter创建XML文档
    XmlDocument读取XML文档
  • 原文地址:https://www.cnblogs.com/lnlvinso/p/10859191.html
Copyright © 2011-2022 走看看