关于visual-studio-code:vs-code调试技巧

launch 文件解读

必选属性：

1. type：启动配置的调试器的类型，以下为 vs code 提供的内置类型，还有一些相似于 pwa-node，pwa-chrome 是依附插件提供的

• node
• php
• go
• chrome

2. request：启动配置的申请类型，目前反对的是 launch 和 attach

• launch：启动 — 多用于对没启动的程序的解决
• attach：附加 — 多用于对曾经启动的程序的解决

3. name: 自定义名称，用于辨别不同的调试配置（显示在“调试启动配置”下拉列表中）

常见可选属性

1. presentation：出现形式（在调试启动配置下的出现形式）

• order：排序地位
• hidden：是否暗藏
• group：分组

2. preLaunchTask：在调试会话开始之前启动一个工作
3. postDebugTask：在调试会话的最初启动的一个工作
4. internalConsoleOptions：此属性管制调试会话期间调试控制台面板的可见性

• neverOpen：从不关上
• openOnSessionStart：启动会话时关上
• openOnFirstSessionStart：启动第一个会话时关上

局部可选属性

1. program：启动调试器时要运行的文件
2. args：传递给程序的参数
3. env：环境变量
4. envFile：环境变量文件的门路
5. cwd：用于查找依赖项和其余文件的当前工作目录
6. port：连贯到正在运行的过程时的端口
7. stopOnEntry：当程序启动时立刻中断
8. console：应用 console 的形式

• internalConsole
• integratedTerminal
• externalTerminal

一些变量 文档

1. ${workspaceFolder}：工作空间文件夹的根门路
2. ${file}：编辑器 以后窗口关上的文件 的门路

调试 nodejs

注：调试 nodejs 时不能应用ES Module（import，export）来导入导出模块，需应用CommonJS（require，module.exports）

launch.json 文件配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "debug nodejs",
      "cwd": "${workspaceFolder}", // 用于设置以后调试文件的根门路 默认为 ${workspaceFolder}
      "skipFiles": ["${workspaceFolder}/node_modules/**/*.js", // 调试时不进入 node_modules 中的程序
        "<node_internals>/**", // 跳过外部 node 模块程序
      ],
      "program": "debug.js", // 启动程序入口文件 必须应用绝对路径
      // "runtimeExecutable": "npm", // 执行 package.json 中定义的 script
      // "runtimeArgs": ["run-script", "debug"], // 执行 package.json 中定义的 script
    }
  ]
}

残缺代码：点击拜访

调试 ts 程序

背景：我的项目中在 tsconfig.json 文件中配置的门路别名，如果应用惯例的 tsc 去编译程序是不能解析出门路别名的，因而引入了 ts-node + tsconfig-paths/register 来编译并执行程序

注：我的项目依赖中须要装置ts-node、typescript、tsconfig-paths

launch.json 文件配置：

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "ts-node", // 自定义名称
        "type": "node", // 内置特定执行器
        "request": "launch",
        "env": {"NODE_ENV": "test", // 设置 node 环境变量 process.env.NODE_ENV 能够获取到这个值},
        "runtimeArgs": [
          "-r",
          "ts-node/register", // 加载模块 ts-node/register
          "-r",
          "tsconfig-paths/register" // 加载模块 tsconfig-paths/register
        ],
        "skipFiles": ["${workspaceFolder}/modules/assistant/node_modules/**/*.js", // 调试时跳过 node_modules 中的程序 必须应用绝对路径
          "<node_internals>/**", // 跳过外部 node 模块程序
        ],
        "cwd": "${workspaceFolder}/modules/assistant", // 对应 runtimeArgs 中找的模块的门路
        "protocol": "inspector",
        "program": "./test/photography.spec.ts", // 拼接在 cwd 的门路前面或者应用绝对路径
        "internalConsoleOptions": "openOnSessionStart"
      }
    ]
}

残缺代码：点击拜访

调试 ng&react

1、装置 Debugger for Chrome 插件

launch.json 文件配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "debug ng", // 自定义名称
      "url": "http://localhost:4200", // 我的项目启动地址
      "skipFiles": ["${workspaceFolder}/node_modules/**/*.js", // 调试时不进入 node_modules 中的程序
        "<node_internals>/**", // 跳过外部 node 模块程序
      ]
    }
  ]
}

残缺代码：点击拜访

调试 python

launch.json 文件配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debug python",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/debug.py", // 调试的程序
      "console": "integratedTerminal"
    }
  ]
}

残缺代码：点击拜访

参考资料

1. Debugging
2. Debugging in VS Code
3. Node.js debugging in VS Code
4. Variables Reference