如何利用vscode进行断点调试后端node开发的项目,如express或koa?

介绍

在我们平常开发中前端可以通过浏览器断点调试代码执行的过程,但是node项目后端通常用命令启动,但命令启动项目也只能打印日志信息,不能断点。所以这一章节教大家如何利用vscode进行断点调试。

步骤

配置launch.json文件

代码如下:

复制代码
"version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "server",
            "program": "${workspaceFolder}/servers/index.js",
            "sourceMaps": true,
            "protocol": "inspector",
            "args": [],
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "node",
            "runtimeArgs": ["--nolazy"],
            "env": {
                "NODE_ENV":"dev",
                "SERVER_PORT":"8086",
                "DB_HOST":"127.0.0.1",
                "DB_NAME":"数据库名称",
                "DB_USER":"",
                "DB_PASSWORD":"",
                "DB_PORT":"27017",
                "JWT_SECRET":"www.guiplan.com",
                "JWT_EXPIRE":"7d",
                "STATIC_PATH":"statics",
                "AUTH":"HSKAHDJSODURUEE"
            },
            "console": "integratedTerminal"
},

configurations 这里是一个数组可以用来配置各种服务

type 则是项目的类型,我这边node后端项目,则可写node类型

name 为服务的名称,启动服务时用于选择对应的名称来启动如下图,会自动出现到启动列表中

program 则为要启动的js文件,而这里的${workspaceFolder} 则表示当前项目的根目录地址

sourceMaps 表示是否使用map,使用map可以定位源码,而不是编译之后的代码

protocol 则为要选用那种调试器调试,这里选用inspector调试器

env 这里一定要注意,系统自带的.env文件里的数据无法读取,这里只能把里面的数据再重新写入进来。

启动服务

如下图点击即可启动服务

断点

打开你的js文件点击左边序号这块即可断点了

调试

断点 之后只要前端调用了接口,进入到断点就会停留再此处,右上角可以操作代码是否继续执行或跳过断点,而最底部控制台则可以自己输入变量或函数看看改代码的值是什么。

相关推荐
天天扭码13 小时前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
hxmmm17 小时前
自定义封装 vue多页项目新增项目脚手架
前端·javascript·node.js
濮水大叔17 小时前
VonaJS是如何做到文件级别精确HMR(热更新)的?
typescript·node.js·nestjs
小胖霞20 小时前
全栈系列(15)github Actions自动化部署前端vue
前端·node.js·github
LYFlied20 小时前
【一句话概述】Webpack、Vite、Rollup 核心区别
前端·webpack·node.js·rollup·vite·打包·一句话概述
猪在黑魔纹里21 小时前
解决VSCode无法高亮、解析numpy中的部分接口(如pi、deg2rad)
ide·vscode·python·numpy
辣椒酱.21 小时前
vscode报错------控制台
vscode·编辑器
让梦想疯狂1 天前
Visual Studio 自动格式化代码
ide·visual studio
code bean1 天前
【CMake 】[第九篇] 解决 CMake + Visual Studio 中文乱码问题完整指南
ide·visual studio
AllinGold1 天前
反重力Antigravity配置
ide