如何利用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文件点击左边序号这块即可断点了

调试

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

相关推荐
朝朝暮暮an7 小时前
Day 3|Node.js 异步模型 & Promise / async-await(Part 1)
node.js
骥龙10 小时前
第六篇:AI平台篇 - 从Jupyter Notebook到生产级模型服务
ide·人工智能·jupyter
kun2003102911 小时前
如何用Obsidian+VSCode生成文案排版并发布到公众号
ide·vscode·编辑器
梦帮科技13 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
Misnice15 小时前
Webpack、Vite、Rsbuild区别
前端·webpack·node.js
开源技术21 小时前
Python GeoPandas基础知识:地图、投影和空间连接
开发语言·ide·python
暴走十八步1 天前
PHP+vscode开启调试debug
开发语言·vscode·php
you-_ling1 天前
IO编程相关知识
c语言·vscode
学嵌入式的小杨同学1 天前
【Linux 封神之路】信号编程全解析:从信号基础到 MP3 播放器实战(含核心 API 与避坑指南)
java·linux·c语言·开发语言·vscode·vim·ux
寻梦csdn1 天前
pycharm+miniconda兼容问题
ide·python·pycharm·conda