VSCode中怎么开启调试模式？三种方式浅析

本篇文章给大家介绍一下试模式的必要性，聊聊VSCode中开启调试模式的三种方式，希望对大家有所帮助！

再论调试模式的必要性

在vscode中开启调试模式

在vscode中调试js,ts代码, 有三种方式

• 在vscode终端里运行node时, 自动附加, 见3.1.

• 直接使用vscode提供的debug终端, 见3.2

• 使用配置文件, 见3.3

1 Auto Attach(自动附加)

1.1 切换选项的方式

通过设置

通过修改配置文件

// 修改或添加
{
  "debug.javascript.autoAttachFilter": "onlyWithFlag"
}

登录后复制

通过命令(推荐)

1.2 各个选项的含义

始终(always)	总是以debug模式启动
智能(smart)	只有指定的文件, 才进入debug模式
仅带标志(onlyWithFlag)	带有--inspect或者inspect-brk 参数, 以debug模式启动
禁用(disabled)	永远不使用debug模式启动

2 JavaScript Debug Terminal(debug 终端)

3 Launch Configuration(启动配置)

3.1 启动配置的属性

必需属性

type	调试器类型, 也可以认为是调试的语言	node => pwa-node, chrome => pwa-chrome
request	启动debug的模式的请求类型,只有两个值	launch:启动, attach:附加
name	此个启动配置的名称, 用于用户自己区分	自定义, 自己理解就行, 给你自己用的

request

name

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "node调试",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node"
    },
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "chrome调试",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

登录后复制

launch和attach都支持的属性

outFiles	指定Source maps文件所在路径
resolveSourceMapLocations	也是指定与Source maps相关的路径
timeout	附加的超时时间, 超时就放弃
stopOnEntry	项目启动起来, 立即debugger一下, 就是相当于在代码的第一行加了一个debugger
localRoot	这个是用来远程调试用的, 我就先不了解它了...
remoteRoot	这个是用来远程调试用的, 我就先不了解它了...
smartStep	自动跳过没有映射到的源文件
skipFiles	指定单步跳过的文件, 就是debugger不跟进去看的源代码
trace	开启会将一些调试输出保存到vscode指定的文件中

skipFiles

trace

launch支持的属性

program	启动项目的入口文件地址(就是要执行的js的路径)
args	相当于命令行参数(下面有详解)
cwd	指定程序启动的路径(下面有详解)
runtimeExecutable	指定可执行程序的启动路径(下面有详解)
runtimeArgs	给可执行程序的参数(下面有详解)
env	指定环境变量(下面有详解)

args

cwd

runtimeExecutable

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv10\\node.js" // 这里是 v10 版本的node路径
    },
    {
      "name": "v11 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv11\\node.js" // 这里是 v11 版本的node路径
    },
    {
      "name": "v12 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv12\\node.js" // 这里是 v12 版本的node路径
    }
  ]
}

登录后复制

runtimeArgs

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js", // 这个现在已经不是 node 的执行文件地址了, 它只是一个参数了
      "request": "launch",
      "type": "pwa-node",
      "args": ["args1", "args2"],
      "runtimeArgs": ["${workspaceFolder}/demo.js", "runtimeArgs2"] // 因为它紧跟在 可执行程序后面, 所以它的第一个参数需要设置为它要执行的文件的地址
      // 如果它是 --experimental-modules 类型参数就没事了, 因为node会把它解析成参数, 这个参数的含义是 启动 es 模块支持. 接下来我会写一篇 js 的模块化的文章, 敬请期待哈
    }
  ]
}
// 启动的命令行是
// C:\Program Files\nodejs\node.exe E:\font-end/demo.js runtimeArgs2 .\demo.js args1 args2

登录后复制

env

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "env": {
        "NODE_ENV": "prod"
      }
    }
  ]
}

登录后复制

attach支持的属性

总结

• 自动附加(影响全局的终端), 如果对自己电脑性能有自信, 设置为always. 命令行运行进入debug模式.

• 强制开启(只影响这一个终端), 如果不方便配置开启全局的自动debug, 使用这种方式进入debug, 也是比较放便的, 就是重新开启这个debug终端之后, 需要cd到需要运行的js文件目录, 比较麻烦. 命令行运行进入debug模式.

• 配置开启(功能强大, 适合调试复杂应用),配置好.vscode/launch.json后, f5启动进入debug模式

// 比较完整一个 launch.json 配置
{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动", // 配置名称
      "program": "${workspaceFolder}/demo.js", // 项目启动入口文件
      "request": "launch", // `debug`模式的请求方式
      "stopOnEntry": true, // 项目启动, 立即`debugger`一下
      "type": "pwa-node", // 调试器类型
      "env": {
        // 环境变量
        "NODE_ENV": "prod"
      },
      "args": ["aaaa"], // 启动命令时跟在 program 后的参数
      "skipFiles": [
        // 指定单步调试不进去的文件
        "<node_internals>/**" // node 的核心库, 比如`require`
      ],
      "cwd": "${workspaceFolder}", // 指定可执行程序的启动路径, process.cwd(),
      "runtimeExecutable": "nodemon", // 指定可执行程序名称, 或者路径, 在这里 type 为 pwa-node 默认值是 node
      "runtimeArgs": ["--experimental-modules"] // 启动命令时, 跟在 runtimeExecutable 后的参数
    }
  ]
}

登录后复制

最后

这里已经有三个坑了, 模块化,调试技巧, vscode插件开发, 我目前更想先写一个vscode插件,敬请期待.

感觉这篇文章能改到你启发的, 希望给个点赞, 评论, 收藏, 关注...

更多编程相关知识，请访问：编程视频！！

以上就是VSCode中怎么开启调试模式？三种方式浅析的详细内容，更多请关注Work网其它相关文章！