zoukankan      html  css  js  c++  java
  • Angular vscode 调试

    1、首先安装 (Debugger for chrome )

    在 Visual Studio Code 中打开扩展面板(快捷键 Ctrl+Shift+X),搜索安装 Debugger for chrome 插件)。

    二、配置启动参数

    在 Visual Studio Code 中快捷键 Ctrl+Shift+D 打开调试面板。

    点击右上角 “齿轮” 按钮,打开 launch.json 文件,添加如下配置:

    launch.json

    {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch localhost with sourcemaps",
                "type": "chrome",
                "request": "launch",
                "url": "http://localhost:4200",
                "sourceMaps": true,
                "webRoot": "${workspaceRoot}",
                "trace": true,
                "userDataDir": "${workspaceRoot}/.vscode/chrome"
            }
        ]
    }

    三、配置 TypeScript

    打开项目中的 tsconfig.json 文件,修改如下配置:

    tsconfig.json

    {
      "compileOnSave": false,
      "compilerOptions": {
        "outDir": "../dist/", // 注意这个路径
        "rootDir": ".",
        "baseUrl": "src",
        "sourceMap": true, // 这个必须要启用,重要
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
          "es2016",
          "dom"
        ]
      }
    }

    五、开始调试

    1、添加调试断点位置。

    2、终端运行 ng serve ,先启动宿主。

    3、在 VS Code 调试面板,选择刚刚配置的 Launch localhost with sourcemaps
    点击启动调试。



  • 相关阅读:
    echart自定义浮窗 增加点击事件
    原生js学习 选择dom
    GOjs版本2.0去除水印
    js 作用域
    javaScript的原型模式
    JavaScript的基本包装类型说明
    原生js 函数 callee属性
    Vue学习-基本指令
    js函数
    Kubernetes(一):云计算发展历程
  • 原文地址:https://www.cnblogs.com/xiaoruilin/p/13905397.html
Copyright © 2011-2022 走看看