【五分钟系列】掌握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 类型的文件