【五分钟系列】掌握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... 找到

更多优秀项目

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

参考

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

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

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

调试前端js

准备一个前端项目

安装Debugger for Chrome

编写launch.json

启动调试

先打个断点

开始调试

调试node项目

准备

编写launch.json

开始调试

使用npm命令进行调试

准备

编写launch.json

开始调试

使用nodemon命令进行调试

编写launch.json

开始调试

调试webpack

准备

新建webpack配置文件

安装webpack

编辑script

配置launch.json

开始调试

调试ts

准备

安装依赖

编写一个ts文件

新增ts配置文件

配置launch.json

开始调试

项目地址

参考

普通程序员

引用和评论

webpack官网指南demo

使用Visual Studio Code编写和激活ABAP代码 (上)

如何使用Visual Studio Code调试PHP CLI应用和Web应用

笔记：写Flink SQL Helper时学到的一些姿势

如何在vscode中调试代码?

调用SCIP C++接口，viusal studio项目工程搭建（For新手）

Cursor+Claude-3.5-Sonnet，Karpathy点赞的AI代码神器！如何使用详细教程