乐趣区

五分钟系列掌握vscode调试技巧

jiezi

调试前端 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… 找到

更多优秀项目

  • https://github.com/bombayjs/b… (web 监控)
  • https://github.com/abc-club/f… (前端资源)

参考

https://www.barretlee.com/blo…

https://www.jianshu.com/p/88d…
本篇文章由一文多发平台 ArtiPub 自动发布

退出移动版