当前位置： 首页 > news >正文

使用谷歌浏览器 devtools 调试node项目

news 来源：原创 2024/5/19 21:50:55

使用谷歌浏览器 devtools 调试node项目

当我们写node项目时，可以通过谷歌浏览器自带的devtools帮助我们debug我们的node项目

1.启动调试命令

nodemon --inspect app.js

在这里插入图片描述

如上图所示，当出现Debugger… 字样时即说明启动成功！

2.在谷歌浏览器打开调试地址

在谷歌搜索栏输入

chrome://inspect/#devices

在这里插入图片描述

~

可以看到有inspect字样，有时候打开不会立即加载出inspect，等待几秒即可，点击inspect，跳出调试页面

~

在这里插入图片描述

3.打开要调试的node项目

~

在这里插入图片描述

如图所示，此时我们就进入了项目调试啦，可以发现，在js文件右下角有绿色小点，意味着此时代码正在运行

在这里插入图片描述

并且在该窗口修改代码是会实时同步到源项目文件中的

4.增加断点

在这里插入图片描述

用postman或者apifox发送请求

在这里插入图片描述

点击发送之后，会自动切换到debug界面

~

在这里插入图片描述

点击右上角箭头可以按照断点执行，分析代码

注意：点击请求接口时不能进入断点时，需要关闭 devtools 工具重新打开

相关文章：

  • 猿创征文 | H5 API之web存储、拖拽事件以及跨文档通信
  • 【数据结构与算法】第六篇：红黑树
  • [Power Query] 分组依据
  • Scala系列从入门到精通（三）
  • 项目框架：登录跳转页面
  • 【毕业设计】视频多目标跟踪系统 - 深度学习 机器视觉
  • Deformable detr源码分析
  • 阿里巴巴Java方向面试题汇总（含答案）
  • （利用IDEA+Maven）定制属于自己的jar包
  • OpenCV dnn模块 分类模型Resnet50 OpenCV dnn模块部署 .onnx模型
  • MySQL入门 - 数据分组之 group by
  • 拼多多分类ID搜索商品数据分析接口（商品列表数据，商品销量数据，商品详情数据）代码对接教程
  • CEO问CIO：数字化运营到底要解决什么问题？
  • 3.16 haas506 2.0开发教程-example-JC035串口屏
  • DPDK的VFIO
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • 【笔记】你不知道的JS读书笔记——Promise
  • download使用浅析
  • JavaScript创建对象的四种方式
  • JWT究竟是什么呢?
  • Linux gpio口使用方法
  • Median of Two Sorted Arrays
  • mongo索引构建
  • Promise初体验
  • React16时代，该用什么姿势写 React ?
  • React-flux杂记
  • ReactNativeweexDeviceOne对比
  • ubuntu 下nginx安装 并支持https协议
  • vue+element后台管理系统，从后端获取路由表，并正常渲染
  • windows-nginx-https-本地配置
  • 笨办法学C 练习34：动态数组
  • 从@property说起（二）当我们写下@property (nonatomic, weak) id obj时，我们究竟写了什么...
  • 海量大数据大屏分析展示一步到位：DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 聊聊directory traversal attack
  • 如何设计一个比特币钱包服务
  • 如何用纯 CSS 创作一个货车 loader
  • 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解 ...
  • (function(){})()的分步解析
  • （react踩过的坑）Antd Select（设置了labelInValue）在FormItem中initialValue的问题
  • (搬运以学习)flask 上下文的实现
  • （附源码）spring boot基于小程序酒店疫情系统 毕业设计 091931
  • （附源码）计算机毕业设计SSM教师教学质量评价系统
  • （每日持续更新）jdk api之FileFilter基础、应用、实战
  • （十七）Flask之大型项目目录结构示例【二扣蓝图】
  • （四）图像的%2线性拉伸
  • (一)appium-desktop定位元素原理
  • （一）VirtualBox安装增强功能
  • (原創) 人會胖會瘦，都是自我要求的結果 (日記)
  • (轉貼)《OOD启思录》：61条面向对象设计的经验原则 (OO)
  • *p++,*(p++),*++p,(*p)++区别？
  • .Net FrameWork总结
  • .NET中GET与SET的用法
  • @拔赤：Web前端开发十日谈