【五分钟系列】掌握vscode调试技巧
调试前端js
准备一个前端项目
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
aaa
<script src='main.js'></script>
</body>
</html>
main.js
var a = 1
var b = 2
console.log(b)
安装Debugger for Chrome
需要先安装插件Debugger for Chrome
编写launch.json
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/chrome/index.html" // 你的index.html地址
}
启动调试
先打个断点
开始调试
这里要选我们刚刚创建的那个配置，即name字段
可以看到，程序运行至断点处
调试node项目
准备
app.js
var a = 1
var b = 3
console.log(b)
编写launch.json
{
"type": "node",
"request": "launch",
"name": "Launch node program",
"program": "${workspaceRoot}/app.js",
"runtimeExecutable": "node"
},
注意： 如果程序报找不到node，则需要加上下面这句
```
"runtimeVersion": "10.14.2", // 与你当前使用的node版本一致，如果你是使用nvm进行node版本管理，则需要加上这个，否则可能找不到node
```
这种场景一般出现在：你使用nvm管理node,但没有全局安装node
开始调试
使用npm命令进行调试
一般我们的项目命令都写在npm script里，我们这里讲一些怎么跑这些script
准备
接上一节，我们再创建一个package.json,注意里面的scripts
注意9229这个端口
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"debugger": "node --nolazy --inspect-brk=9229 app.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
编写launch.json
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeVersion": "10.14.2",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debugger" // 需跟package里定义的一致
],
"port": 9229 // 需与package里定义的inspect-brk一致
},
开始调试
使用nodemon命令进行调试
接上一节
编写launch.json
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeVersion": "10.14.2",
"runtimeExecutable": "nodemon",
"args": ["${workspaceRoot}/app.js"],
"restart": true,
"protocol": "inspector", //相当于--inspect了
"sourceMaps": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
},
开始调试
这时我们修改b变量就能重新刷新了
调试webpack
rollup类似，这对于调试源码非常有用
准备
新建webpack配置文件
这里我们以app.js为入口文件
var b =1
console.log(b)
module.exports = {
entry: './app.js',
};
安装webpack
cnpm i webpack webpack-cli -S
编辑script
"webpack": "webpack",
"build": "node --inspect-brk=9230 ./node_modules/.bin/webpack --config webpack.config.js",
注意：我们要用./node_modules/.bin/webpack来启动服务
配置launch.json
{
"type": "node",
"runtimeVersion": "10.14.2",
"request": "launch",
"name": "webpack debugger",
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "build"],
"port": 9230
},
开始调试
调试ts
由于ts文件不能直接运行和调试，我们需要先将其转为js再进行调试
准备
安装依赖
cnpm i typescript ts-node -S
其中ts-node可以直接用来执行ts文件
编写一个ts文件
index.ts
const t: number = 0;
console.log(t)
新增ts配置文件
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true
},
"include": ["."]
}
配置launch.json
{
"type": "node",
"request": "launch",
"name": "ts debugger",
"runtimeVersion": "10.14.2",
"runtimeExecutable": "node",
"runtimeArgs": [
"-r",
"ts-node/register"
],
"args": [
"${workspaceFolder}/index.ts"
]
},
这里的意思是通过 node 来启动 /src/index.ts，在启动时为 node 注入一个 ts-node/register 模块，以便可以执行 ts 类型的文件
开始调试
项目地址
以上代码可以在 https://github.com/repototest/vscode-debugger-demo 找到
更多优秀项目
- https://github.com/bombayjs/bombayjs (web监控)
- https://github.com/abc-club/free-resources (前端资源)
参考
https://www.barretlee.com/blog/2019/03/18/debugging-in-vscode-tutorial/
https://www.jianshu.com/p/88d9a1e6fdcd
本篇文章由一文多发平台ArtiPub自动发布
