前言
对于前端来说,vscode调试是我们必须要掌握的技能包。可能我们会简单的调试,但是不知道调试有哪些方式,也不清楚调试中launch.json
配置的作用。
本文介绍下在vscode中调试的几种方式,使用launch.json
配置文件中两种模式的区别。
主要内容如下图所示:
1. 终端调试
终端调试:主要在终端中运行程序命令,从而进入调试模式。
有两种方式:
- JavaScript Debug Terminal(debug 终端)
- 默认终端+设置smart模式
下面一一介绍:
1.1 使用JavaScript Debug Terminal(debug 终端)
直接启动一个debug
模式的终端, 在里面启动的node
都会进入debug
模式。
具体步骤:
- 打开一个新终端,下拉选择JavaScript Debug Terminal
- 运行程序命令 node index.js
上面的方式,是每次都需要切换到JavaScript Debug Terminal
终端,有没有不用切换特定的终端,也可以直接进入调试。
答案是有的,接下来看Auto Attach
。
1.2 Auto Attach: Smart
上面的方式每次都需要开一个额外的终端进行调试,Auto Attach
的特性,它可以在不切换 shell 的方式直接调试 node.js。
具体步骤如下:
- 使用快捷命令
ctrl + shift + p
,输入Toggle Auto Attach
,选择Smart
。
- 新建普通终端运行
node index.js
直接进入调试模式
可在 vscode 的设置中,可以找到关于 Smart 模式下允许执行的脚本列表。
2. 侧边栏Debug调试
vscode中的默认debug栏,可以默认或者使用配置文件启动。
2.1 无launch.json
无配置文件,直接点击Run and Debug,默认是调试当前文件。
会进入当前文件的调试
2.2 有launch.json配置文件
启动配置是以一种配置文件的方式去设置如何启动debug
模式的方式, 提供更加配置化去满足运行调试需求。
具体步骤:
- 正常初次调试,点击debug的右侧侧边栏,点击
create a launch.json file
。
- 选择运行的环境,不同的语言选择不同
- 选择node.js,根目录下的会创建.vscode/launch.json文件
默认内容如下
其中有三个通用参数:
- type: 运行环境
- request:launch 或 attach
- name:调试启动的名称
可以配置是一个数组,提供下拉列表供调试使用。
下面主要说明(launch和attach)两种调试方式的区别:
先写一段js程序,用原生node写一个简易服务器
const http = require('http');
const server = http.createServer((req, res) => {
res.end('Hello World\n');
})
server.listen(3000, () => {
console.log(`Server running at http://localhost:3000`);
})
2.2.1 launch
定义launch方式,点击生成,默认如下:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\index.js"
}
]
}
点击调试
访问http://localhost:3000
程序中加断点,然后刷新3000页面,就进入调试模式
launch模式
是一个未启动的程序,但是当程序已经启动,不用重新启动,如何添加断点,就使用attach。
2.2.2 attach
需要配置一个attach模式,使用快捷方式,如下图所示:
会多出来一条配置
{
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
具体调试步骤:
- 先运行node程序
- 启动debug
- 选择进程id
- 此时终端会添加debugger attached,默认给程序添加调试器
- 刷新页面
至此就完成了不用重新断开程序就完成调试。
2.3 两种调试方式总结
总结 | launch | attach |
---|---|---|
作用 | vscode负责启动程序并给程序搭建一个调试器 | 为一个已经在运行且暂不支持调试的程序(通常是一个正在运行的web应用程序)加一个调试器 |
需要几方合作 | 1 | 2 |
使用场景 | 日常开发 | 远程调试、本地开发的一些特殊情况 |
2.4 vscode快捷方式调式
正常快捷方式f5
即Start Debugging
调试,会默认读取launch.json的配置文件,进入调试。而Run Without Debugging
是不添加调试器,相当于没有添加调试器去启动命令。
如下图所示:
3. 总结
主要介绍在 VSCode 中如何进行 JavaScript 的调试:
- 终端方式
- JavaScript Debug Terminal:通过特定的
debug
终端启动的程序都能够进入调试模式。 - Auto Attach Smart:这种方式更加方便,不用切换终端的情况下,直接进入调试模式。
- JavaScript Debug Terminal:通过特定的
- 侧边栏调试方式
- 无
launch.json
配置:在没有配置文件的情况下,VSCode 会默认调试当前打开的文件。
- 无
-
- 有
launch.json
配置文件:用户可以通过配置launch.json
文件来定制调试行为
- 有
- 两种调试方式的区别:
- Launch:适用于启动新的程序进行调试。通过
launch.json
配置文件启动程序并进入调试模式。 - Attach:适用于已经运行的程序进行调试。它通过附加调试器到正在运行的 Node.js 进程来进行调试。
- Launch:适用于启动新的程序进行调试。通过
如有错误,请指正O^O!
可以接着看:
轻松使用VSCode调试(TS、C/C++、Python、Rust)