从node服务端到浏览器端,调试node脚本,验证接口功能是否正常。

一、温故知新

https://www.cnblogs.com/camille666/p/nodejs_server.html

https://www.cnblogs.com/camille666/p/webpack_debug.html

二、写代码

添加入口脚本app.js,路由文件routes,数据处理文件controller,视图html,测试发请求。

在路由脚本和数据处理文件里面添加debugger(很关键)。

三、修改package.json文件

"scripts": {
    "debug": "node --inspect-brk ./bin/server"
}

四、调试node服务端

1、启动调试

先关掉服务,再输入调试命令。

# 关掉服务,可能是其他命令,这里是自己的node项目用的命令,不具有通用性。make stop 

# 启动调试yarn debug

2、打开chrome,地址栏输入

http:///

3、鼠标右键,打开浏览器调试面板,会看到一个绿色六边形。

4、点击绿色六边形,出现调试弹窗M。

5、点击Add folder to workspace,添加node项目文件夹。

六、测试html,向node服务发接口请求

1、打开chrome,新建一个tab,在地址栏输入

虽说是写服务端,但是通常也会写一个html,用来测试服务端接口。(通过postman去发请求,就不用在chrome打开html)。说白了,两种方式,要么写html发请求测试,要么在postman发请求测试。

http:///

这时弹窗M会出现,点击小工具即可调试,点击红框内的三角图标,可以跳到下一个断点,方便在代码区查看请求参数。这一步很关键,只有发了请求,才能验证请求,node脚本才能进入你debugger的地方。

调试node接口的更多相关文章

  1. 用 chrome 调试 node.js 代码

    1.全局安装 node-inspector  cnpm install -g node-inspector 2.启动node项目入口文件,如 node --inspect index.js 3.控制台 ...

  2. 【译】使用 ndb 调试 node 应用

    原文链接:Debugging Node.js Application Using ndb Google Chrome 实验室发布了一款新的 node debug 工具来提升开发者体验,本文将会全面介绍 ...

  3. 调试 node.js 程序

    调试 node.js 程序 在程序开发中,如何快速的查找定位问题是一项非常重要的基本功.在实际开发过程中,或多或少都会遇到程序出现问题导致无法正常运行的情况,因此,调试代码就变成了一项无法避免的工作. ...

  4. 用node-inspector调试Node.js(转自NOANYLOVE'S BLOG)

    原文地址:http://www.noanylove.com/2011/12/node-the-inspector-debugging-node-js/ 用node-inspector调试Node.js ...

  5. 使用webstorm调试node程序

    前言 相信大家接触过不少node代码了,如果你应用的比较初级或者针对你的项目不需要接触过深的node代码,也许你仅仅需要简单的console.log('your variable')就完全满足你的需要 ...

  6. CC Debugger调试下载接口

    调试下载接口: 引脚序号 引脚名称 相关说明 1 GND 地线 2 VDD 目标板电源正端 3 DC 调试-时钟线 4 DD 调试-数据线 5 CSn 下载-片选线(低电平有效) 6 SCLK 下载- ...

  7. DOM笔记(二):Node接口

    所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...

  8. 如何调试webservice接口是否正常

    soapui 调试webservice接口 1首先iis 部署网站 2添加webservice 3附加到进程调试  找w开头的 4然后request填充数据

  9. 优雅的使用Chrome调试Node程序

    前言 我不知道大家用什么来调试node程序.可能有的人用node-inspect,但是这货很久没更新了,而且一堆的bug用起来很不爽:可能有的人用命令行来,但是这样操作不够灵活:还有人只用consol ...

随机推荐

  1. 修复wecenter移动版description首页描述一样问题

    因网友要求,wecenter移动版description首页描述一样,所以在此写个教程,希望帮助大家! 修改方法 打开app/m/main.php TPL::output('m/question'); ...

  2. Fiddler实现篡改接口请求和返回数据

    步骤如下: 点击rules->Automatic Breakpoints,在这个选项下,我们可以看到三个可选项: Before Requests:在请求发出前拦截请求: After Reques ...

  3. 品优购 Angular学习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Codeforces 484 E. Sign on Fence

    [传送门] 题意就是给一排围栏,每个围栏都有一个高度,查询区间$\left[l, r\right]$之间长度为$w$的子区间的最小高度的最大值.首先,这个最大值肯定是这个区间里的围栏的某个高度,如果是 ...

  5. Spark两种内存管理

    Spark动态内存管理 Spark 1.6 后改为动态内存管理(如果想启用静态内存管理,方法下面会介绍),启动动态主要体现在 存储内存和执行内存的动态.

  6. 使用grok exporter 做为log 与prometheus 的桥

    grok 是一个工具,可以用来解析非结构化的日志文件,可以使其结构化,同时方便查询,grok 被logstash 大量依赖 同时社区也提供了一个prometheus 的exporter 可以方便的进行 ...

  7. A@GC*014

    A@GC*014 A Cookie Exchanges 卡时跑了1s就输出-1 每次操作会使三个数的极差缩小一半,所以最多\(\log\)次之后就会出现\(A=B=C\)的情况,可以直接判掉 B Un ...

  8. MSSQL随机修改时间

    GO DECLARE @BDate datetime, @EDate datetime SET @BDate = '20190801' --上限 SET @EDate = '20190819 23:5 ...

  9. 下载 python

    https://www.python.org/ftp/python/ https://www.cnblogs.com/linxue/p/10097785.html https://blog.csdn. ...

  10. PowerDesigner应用02 逆向工程之导出PDM文件前过滤元数据(表、视图、存储过程等)

    在上一篇文章<PowerDesigner应用01 逆向工程之配置数据源并导出PDM文件>步骤二中导出了目标数据库对应的PDM文件, 该文件中展示出了所有表的信息与关系. 某些业务场景下只需 ...