VSCode怎么开启调试模式三种方式
平时在浏览器中调试的比较多, 在浏览器中, 只需要打开控制台, 开启了调试模式, 然后遇到
debugger
语句, 或者自定义的断点, 就会让程序停下来, 进入debug
模式.
再论调试模式的必要性
如果只需要看一个简单的值, 那么完全可以使用
console
, 因为开启调试模式的成本比较大.
在浏览器中, 因为对象是引用类型的并且浏览器不会直接将对象完成折叠开, 所以如果
console
之后修改了对象, 再到控制台去看, 得到的将是修改后的对象了
打印后并没有自动全部折叠开
去手动折叠开的时候, 浏览器再去读值, 已经变成了修改后的值
这种问题的出现, 是因为对象, 所以如果我们转字符串再打印就不会有这个问题, 但是, 不好看, 这里只是举个例子, 有些情况下还是需要用调试模式的.
在vscode
中开启调试模式
在vscode
中调试js
,ts
代码, 有三种方式
-
在
vscode
终端里运行node
时, 自动附加,见3.1
. -
直接使用
vscode
提供的debug
终端,见3.2
-
使用配置文件,
见3.3
1 Auto Attach(自动附加)
在
vscode
的终端里运行node
时, 根据不同的选项, 自动判断是否启动debug
模式.
一共有 4 种选项, 切换选项的方式也有三种
1.1 切换选项的方式
不管通过哪种设置方式, 更换了设置方式之后, 最好重启一下
vscode
以让它更好的生效
通过设置
通过修改配置文件
打开配置文件
settings.json
文件之后
// 修改或添加
{
"debug.javascript.autoAttachFilter": "onlyWithFlag"
}
通过命令(推荐)
使用
Ctrl Shift P
调出命令(mac
或者修改了快捷键的自己找一下),
输入
attach
可以找到它, 选中后可以看到这四个选项, 然后再次选中选项切换到你想要的选项
1.2 各个选项的含义
官网的文档没有更新, 默认选项已经不是
smart
了, 改成disabled
了
选项 | 含义 |
---|---|
始终(always ) |
总是以debug 模式启动 |
智能(smart ) |
只有指定的文件, 才进入debug 模式 |
仅带标志(onlyWithFlag ) |
带有--inspect 或者inspect-brk 参数, 以debug 模式启动 |
禁用(disabled ) |
永远不使用debug 模式启动 |
智能(smart)
是通过debug.javascript.autoAttachSmartPattern
这个配置项指定的是否开启debug
模式的文件路径, 默认值是["${workspaceFolder}/**","!**/node_modules/**","**/$KNOWN_TOOLS$/**"]
如果启动了
禁用(disabled)
模式, 那么node --inspect
将也不会进入debug
模式, 只能通过下面的方式开启一个debug
终端才能进入debug
模式, 哎~vscode
也是个坑货, 不知道啥时间把默认方式改成了disabled
, 所以我记得有一次我使用node --inspect
没能进入debug
模式, 还挺奇怪的, 现在才明白怎么回事.
2 JavaScript Debug Terminal(debug 终端)
直接启动一个
debug
模式的终端, 在里面启动的node
都会进入debug
模式.
通过上面的方式(
Auto Attach
)控制的是vscode
中启动的所有终端, 这个只控制它启动的这一个终端.
3 Launch Configuration(启动配置)
这个才是重头戏, 我也是主要想了解这个
启动配置是以一种配置文件的方式去设置如何启动
debug
模式的方式, 它提供了更加配置化去满足运行调试复杂应用
3.1 启动配置的属性
这个配置文件位于当前工作区目录下的
.vscode/launch.json
, 可以手动创建一个, 或者通过vscode
快捷创建一个
然后选择
node
就好了
必需属性
必需属性, 修改的比较多的应该是
name
了, 另两个在node
中, 一般都不会修改.
属性名 | 含义 | 属性值示例 |
---|---|---|
type | 调试器类型, 也可以认为是调试的语言 | node => pwa-node , chrome => pwa-chrome |
request | 启动debug 的模式的请求类型,只有两个值 |
launch :启动, attach :附加 |
name | 此个启动配置的名称, 用于用户自己区分 | 自定义, 自己理解就行, 给你自己用的 |
request
我们常用的是
launch
, 所以这里只是讨论了launch
的使用.
对于
launch
和attach
的区别, 可以看 B 站上这个大佬的视频, 讲解地很好. 程序员阿汤 => 介绍 launch.json
name
name
的含义是: 一个launch.json
中可以配置多个启动配置, 所以需要给每个启动配置起个名字, 用于区分
{
"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}"
}
]
}
选中某一个, 然后可以使用快捷键
f5
, 快速启动, 或者点击运行图标
launch
和attach
都支持的属性
属性 | 含义 |
---|---|
outFiles | 指定Source maps 文件所在路径 |
resolveSourceMapLocations | 也是指定与Source maps 相关的路径 |
timeout | 附加的超时时间, 超时就放弃 |
stopOnEntry | 项目启动起来, 立即debugger 一下, 就是相当于在代码的第一行加了一个debugger |
localRoot | 这个是用来远程调试用的, 我就先不了解它了... |
remoteRoot | 这个是用来远程调试用的, 我就先不了解它了... |
smartStep | 自动跳过没有映射到的源文件 |
skipFiles | 指定单步跳过的文件, 就是debugger 不跟进去看的源代码 |
trace | 开启会将一些调试输出保存到vscode 指定的文件中 |
skipFiles
(这个挺有用的, 有些代码不想跟进去看, 但是经常点快了, 就进去了..., 可以把这些文件排除掉,
<node_internals>/**/*.js
配置上这个, 可以跳过node
核心模块的代码.)
trace
开启
trace
后
launch
支持的属性
属性 | 含义 |
---|---|
program | 启动项目的入口文件地址(就是要执行的js 的路径) |
args | 相当于命令行参数(下面有详解) |
cwd | 指定程序启动的路径(下面有详解) |
runtimeExecutable | 指定可执行程序的启动路径(下面有详解) |
runtimeArgs | 给可执行程序的参数(下面有详解) |
env | 指定环境变量(下面有详解) |
args
"args": ["aaa", "bbb"]
:在命令行传递参数的方式, 在node
中可以通过process.argv
拿到
cwd
"cwd": "${workspaceFolder}/demo"
, 配置这个路径, 在node
中, 相当于指定了process.cwd()
的路径
runtimeExecutable
这个可以指定启动的程序名, 比如使用
nodemon
启动, 或者指定路径, 比如你有3
个版本的node
想启动调试看看各个版本的差异, 就不需要切换全局的node
版本, 只需要设置多个配置项就行啦. 这样很方便的.
{
"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
这个里面写的参数会紧跟在可执行程序后面, 在
node
程序中,node
会将它后面的第一个参数视为它要执行的文件的路径, 所以需要有所调整.
{
"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
这个参数在弄成
npm
启动项目的时候, 比较有用
env
{
"version": "0.2.0",
"configurations": [
{
"name": "v10 版本启动",
"program": "${workspaceFolder}/demo.js",
"request": "launch",
"type": "pwa-node",
"env": {
"NODE_ENV": "prod"
}
}
]
}
attach
支持的属性
我们常用的是
launch
方式启动, 就先不了解attach
的方式启动了.
总结
对于如何在
vscode
中启动debug
模式, 应该是比较清楚的了
在
vscode
中, 一共有三种方式启动debug
调试, 分别是
-
自动附加(影响全局的终端), 如果对自己电脑性能有自信, 设置为
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插件
,敬请期待.
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfijfi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01