利用Chrome + DevTools + Postman + Node + inspect参数调试Express

最新推荐文章于 2024-08-15 11:22:58 发布
最新推荐文章于 2024-08-15 11:22:58 发布
阅读量567 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE Windows Nodejs 文章标签： chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fittec/article/details/115841334
本文介绍了如何利用Node的--inspect参数启动调试，结合Chrome浏览器的chrome://inspect页面，打开DevTools进行远程目标调试。在Sources面板设置断点后，通过Postman发送请求，触发断点，实现Express应用的调试。调试过程中，DevTools能够成功捕获并展示相关信息，实现了对数据的修改和查看。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 通过Node.exe  --inspect bin/www启动要调试的js文件  bin/www为bin目录下的www.js文件，--inspect代表要启动调试功能

2.打开Chrome浏览器并在地址栏输入 chrome://inspect后回车，然后点击Open dedicated DevTools for Node打开调试窗口

调试器与连接后会显示Remote Target 与Node版本号与及等待调试文件与目录

 

打开调试窗口后，在Sour

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Chrome Devtools 调试指南
ducanwang的博客
01-18 765
在 Console 面板中，你可以查看 JavaScript 错误和警告，以及使用控制台进行交互式 JavaScript 调试。在 Performance 面板中，你可以查看页面性能的细节，包括加载速度、渲染速度和 JavaScript 执行时间等。在 Network 面板中，你可以查看页面加载的所有资源，包括 HTML、CSS、JavaScript、图片等。在 Sources 面板中，你可以查看和调试 JavaScript、CSS 和 HTML 的源代码。
Deno开发REST API实战
板三的梦
09-05 2768
从Deno基础知识、环境搭建，到常用第三方框架或模块，一步步学习Deno开发REST API。涉及Oak、TypeORM、安全、校验、测试等
最新 Chrome DevTools(v57) 使用详解
weixin_33863087的博客
12-21 2174
写在前面：Chrome DevTools 系列文章正在紧张地整理当中，目前正在整理 DevTools 的第一部分： Elements，大家可以关注 Chrome DevTools 来获得最新的信息，也可以关注整个项目front-end-study。 Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器...
使用谷歌浏览器 devtools 调试node项目
没化妆，别看
08-31 1067
当我们写node项目时，可以通过谷歌浏览器自带的devtools帮助我们debug我们的node项目。如图所示，此时我们就进入了项目调试啦，可以发现，在js文件右下角有绿色小点，意味着此时代码正在运行。如上图所示，当出现Debugger…用postman或者apifox发送请求。点击发送之后，会自动切换到debug界面。点击右上角箭头可以按照断点执行，分析代码。并且在该窗口修改代码是会。...
Chrome Devtools 高级调试指南（新）
油墨香^-^的博客
05-24 763
前言 本文暂未涉及Performance面板的内容。 后续会单独出一篇，以下是目录： 常用命令和调试 黑盒脚本：Blackbox Script 控制台内置指令 远程调试WebView 1. Chrome Devtools 的用处 前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等 后端开发：网络抓包、开发调试Response 测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试 其他：安
chrome的devtool源码inspectjs
如鹿渴慕泉水的专栏
08-23 3631
var allDescriptors = [{ "dependencies": ["platform", "common", "host", "ui"], "name": "ui_lazy", "scripts": [] }, { "experiment": "promiseTracker", "extensions": [{ "classN
如何查看react node,js前端
最新发布
03-08
总结步骤可能包括：使用Chrome DevTools调试React组件，使用Node.js的--inspect调试后端，使用Webpack Dev Server的代理功能处理API请求，以及可能的联合调试方法。同时，需要确保项目配置正确，如webpack.config.js...
【VSCode调试自动化】：一键部署与调试流程自动化
在这样的背景下，VSCode调试自动化应运而生，它旨在通过自动化工具和插件来简化调试流程，提高开发人员的工作效率。 ## 调试自动化的优势 调试自动化不仅可以减轻开发者的重复工作负担，还可以减少
Chrome DevTools 攻略
ruky36的专栏
05-30 581
Chrome DevTools 是网页开发和调试的必备工具，其强大的功能和灵活的使用方式可以极大地提高开发效率。通过熟练掌握各个面板和功能，开发者可以轻松地检测和解决网页中的各种问题，从而打造出性能优良、用户体验良好的网页应用。它提供了一系列工具和功能，帮助开发者查看和修改网页的结构、样式、脚本，以及性能分析、网络请求监控等。- 在 Network 面板中查看每个请求的详细信息，包括请求头、响应头、Cookies 等。- 在 Sources 面板中设置断点，逐步执行代码，检查变量值和调用堆栈。
浏览器调试工具-Chrome Dev Tools
qq_68874993的博客
08-15 1531
浏览器调试模式下的各个调试工具是开发者进行网页开发和调试的重要工具
Devtools测试工具testRunner.zip
07-17
testRunner 是Chrome devtools 的扩展插件，用于测试和调试 Querypoint 调试器。它也可被运行在 Chrome devtools LayoutTests 中，用于调试bug。 标签：testRunner
网狐数据生成器
11-23
很多都是拿来卖vip才能下载的，分享给大家，自己花的冤枉钱 网狐通用加解密 （包含二开）DevTools(数据生成器) 网狐GUI数据库生成器获取机器码,功能就不介绍了
数据生成器
12-20
C#简单测试数据生成器，开始时，生成一些常用数据
Chrome浏览器devTools参数含义
okiemomo
10-14 283
The Requests table displays the following columns by default: 请求列表默认显示以下列： Name. The filename of, or an identifier for, the resource. 名称：资源的文件名或标识符。 Status. The HTTP status code. 状态：HTTP 状态代码。 Type. The MIME type of the requested resource. 类型：请求资源的.
express教程【入门级教程】
weixin_45915300的博客
06-03 425
当请求为post请求时，可以使用body-parser进行获取post的参数。启动命令：node index.js。安装body-parser步骤。express创建服务器。express应用场景。
node inspect=0
ISaiSai的专栏
04-12 495
inspect=0 的含义是随机分配一个未使用的端口号码 用以调试 inspect 则固定使用 9229
你应该学会的接口调试神器——Postman高级用法
weixin_34358092的博客
11-19 1242
postman这个神器相信大家都用过，程序员作为非专业的测试人员，非常需要这么一款简单轻量级的restful测试工具，但是不知道你是否知道，postman的强大之处不只是测试一下接口，还有其他非常赞的使用方式。 批量执行接口 入门级功能，但是被很多人忽略。postman左侧有个collections的ta...
跟我学调试-必备神器：Postman
前端你别闹
01-19 552
必备工具：postman「 抒情 」这几天雾霾十分严重，我的心情也跟着沉重，为什么呢？因为我很奇怪还有很多新人不懂得如何在本地模拟请求数据，如何在没写代码的情况下就拿到后端接口数据，总是苦恼的发问。大家知道，身为奋斗在一线的程序员，最基本的前后端通信调试，都搞不通，我们何来谈什么升职加薪，改变世界。所以我决定从一些最基础的常识知识点切入，发一个系列文章，让大家知道北妈正经起来，还是那么可怕那么帅！
接口测试工具 — postman
个人博客
02-19 5308
postman主要用来做http协议的接口功能测试。官网下载地址：Postman侧边栏允许你查找、管理请求和集合。侧边栏分为两个主要的选项卡，包括历史和集合选项卡。可以拖动右边的边来调整侧边栏的宽度。侧边栏也可以隐藏到小屏幕（标题栏 view—>toggle side bar）。（1）历史选项卡 ，通过Postman应用程序发送的每个请求都保存在侧边栏的History选项卡中。（2）集合选项卡 ，在侧栏中创建和管理集合选项卡的集合。集合>>文件夹>>接口>>请求参数>>send。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自由软件开发者

有你的鼓励，我会更加努力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值