关闭

是时候抛弃Postman了,试试 VS Code 自带神器插件

时间: 2019-12-22阅读: 594标签: 调试

前言

接口调试是每一个软件开发从业者必不可少的一项技能,一个项目的完成必然经过大量的接口测试,实际开发过程中,接口调试的时间不比实际开发所用的时间少。

作为前端开发人员,我们通常使用 Postman(或 PostWoman 等 ) 工具来进行REST API调用。


一、Postman 限制

Postman 用来调试接口很方便,但它有很多限制。

1. 需要开启额外的软件,并且占用大量的 RAM

我们已经使用 VSCode 开发项目,为什么我们还需要额外打开 Postman 去调试接口喃?并且 Postman 运行占用了大量的 RAM,这对 RAM 紧缺的设备来说,尤为重要。

2. 高级功能要付费

进行调用测试 API 是可以的,但是如果你要编辑、版本控制或仅与你的团队共享,则不是很方便。

当然,你可以使用 Postman 付费版本,但这意味着你需要付费,并且你所在的所有团队都需要使用 Postman ,这工程量就很大了!


二、你知道 REST Client 吗?

REST Client 是一个 VS Code 扩展插件,它允许你发送 HTTP 请求并直接在 VS Code 上查看响应结果。

由于它是基于文本格式,所以我们可以轻松的在存储库之间进行版本控制。


三、Postman 与 REST Client

1. 优点

  • 能够进行版本化并可以在团队间共享你的 API 调用;
  • 仅仅是一个 HTTP 文件,团队成员间可以通过 git 协作维护这个文件;
  • 无需切换窗口,可以在一个 HTTP 文件中去维护多个接口;
  • 相比于Postman,REST Client支持了 cURL 和 RFC 2616 两种标准来调用REST API;

2. 缺点

  • 你必须使用 VS Code,如果使用其它的工具开发是不可以的;
  • Postman 拥有强大的用户操作界面,而 REST Client 没有操作界面,仅仅是在一个 HTTP 文件中编写请求,没有 Postman 方便;


四、REST Client

1. 常规

步骤一:安装 REST Client 插件

步骤二: 创建一个 .http 或 .rest 文件

步骤三:写入测试接口

  1. 符合 RFC 2616 标准的 POST 请求
POST http://dummy.restapiexample.com/api/v1/create HTTP/1.1
content-type: application/json

{
    "name":"Hendry",
    "salary":"61888",
    "age":"26"
}
  1. 符合 cURL 标准的 POST 请求
curl -X POST "http://dummy.restapiexample.com/api/v1/create" -d "Hello World"

如果省略 request 方法,请求将被视为 GET 。

注意:接口间通过 ### 分隔,同一个 .http 文件里可以涵盖多个 HTTP 请求。不像 Postman,不同的 HTTP 请求需要放在不同的 tab 里。

步骤四:发送请求,测试接口

点击 Send Request ,或者右键选择 Send Request ,或者直接用快捷键 Ctrl+Alt+R(或Cmd+Alt+R) ,你的 REST API 就执行了,然后 API Response 就会显示在右边区域。


2. 更远一步

一个 http 文件可能定义许多请求和文件级自定义变量,很难找到你想要的请求/变量。我们可以使用快捷键 Ctrl+Shift+O(或Cmd+Shift+O)来切换请求/变量。

自定义环境变量

不同的环境(开发、测试、生产),API 接口参数可能有所不同,我们不可能每次切换环境的时候,都手动修改代码,所以我们可以自定义项目的环境变量,每次切换即可。

点击 Code => Preferences => Settings 打开设置,切换到 Workspace Settings ,配置 settings.json 文件:

{
  "rest-client.environmentvariables": {
    "$shared": {
        "version": "v1",
        "prodToken": "foo",
        "nonProdToken": "bar"
    },
    "local": {
        "version": "v2",
        "host": "localhost",
        "dummyhost": "local",
        "token": "{{$shared nonProdToken}}",
        "secretKey": "devSecret"
    },
    "production": {
        "host": "api.apiopen.top",
        "dummyhost": "dummy.restapiexample.com",
        "token": "{{$shared prodToken}}",
        "secretKey" : "prodSecret"
    }
  }
}

可以切换不同的环境(Ctrl+Alt+E 或 Cmd+Alt+E),调用相应的配置项(host 、 token 等)。

### 测试接口 RFC 2616
// host 为环境变量
GET https://{{host}}/musicRankings HTTP/1.1

当然,rest-client 还有更多的配置项,例如:

  • rest-client.defaultHeaders :默认的 header 请求体,默认为 { "User-Agent": "vscode-restclient", "Accept-Encoding": "gzip" } ;
  • rest-client.timeoutinmilliseconds :超时时长,默认为 0 ms;
  • rest-client.previewOption :控制哪些部分应该通过rest-client预览,可选 full 、 headers 、 body 、 exchange ,默认为 full ;
  • rest-client.followredirect :是否支持 HTTP 3xx 的重定向,默认支持;

等等…...

自定义文件变量

我们可以在 HTTP 文件任意位置定义文件变量,它们都可以在整个文件的任何请求中引用。例如:

// 文件变量
@port = 8080
@contentType = application/json

### 测试接口 RFC 2616
// 文件变量
@name = musicRankings
GET https://{{host}}/{{name}} HTTP/1.1
  • 对于文件变量,定义遵循 @variableName = variableValue 占用完整行的语法
  • 变量名称(variableName)不得包含任何空格。至于变量值(variableValue),它可以由任何字符组成,甚至允许空格(前导和尾随空格将被剥离);
  • 如果你想保留一些像换行符这样的特殊字符,你可以使用反斜杠 \n ;

自定义请求变量

当单个请求结果的值需要被其它请求使用时,可以使用请求变量,格式为:@name newname ,请求变量引用语法为 {{requestName.(response|request).(body|headers).(JSONPath|XPath|Header Name)}}。

@contentType = application/json

###

# @name createComment
POST https://{{host}}/comments HTTP/1.1
Content-Type: {{contentType}}

###

# @name getCreatedComment

GET https://{{host}}/comments/{{createComment.response.body.$.id}} HTTP/1.1

Authorization: {{login.response.headers.X-AuthToken}}

系统变量

系统自带的一些变量,使用系统变量需要有 $符号

  • {{$guid}} 唯一识别号
  • {{$randomInt min max}} 返回一个min 和 max 之间的随机数
  • {{$timestamp [offset option]}}:添加UTC时间戳。
  • {{$timestamp number option}},例如3小时前{{$timestamp -3 h}};代表后天{{$timestamp 2 d}}。

更多系统变量用法请参考 官方文档


更多功能等待你的挖掘,详见vscode-restclient!!!


五、总结

Postman 有口皆碑,确实是一个不错的工具,但 REST Client 也值得进行尝试,毕竟连后端也已经推出了 IDEA REST Client, 在和同事进行协作开发时,在项目中增加一个 .http 接口请求文件,方便自己的同时方便其他人。

想看往期更过系列文章,点击前往 github 博客主页


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7303

关闭

Js调试:console对象

console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。warn方法和error方法也是在控制台输出信息,它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角

10个用Console来Debug的高级技巧

在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript)。作为一个匠人,我喜欢专研各种工具。在本文,我会为你介绍一些用老式console来debug的技巧。

JS断点调试,必备的javaScript的debug调试技巧

断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具,以及调试bug时的一些思路。

使用 tap 来快速 debug

在这里 tap 是一个可以用来快速调试、链式调用、匿名函数,还可以打印任何你想打印的东西的函数。为什么我们不用 console.log 这个老方式了?

调试 node.js 程序

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

无限debugger问题的实现_解决阻止页面不断debugger

一次扒某网站的前端代码,打开控制台要看Network,结果发现他们页面一打开控制台就不断的debugger,100ms一次,很影响看页面内容。每次在断点处停下来的时候页面都会跳到source这个tab页面,也能够看到他的debugger的代码,其实他的实现很简单

js调试,14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript,js调试,熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug。

js 反调试_JavaScript 反调试技术技巧

对于JavaScript来说,你只需要花一点时间进行调试和分析,你就能够了解到JavaScript代码段的功能逻辑:1. 检测未知的执行环境(我们的代码只想在浏览器中被执行);2. 检测调试工具(例如DevTools);3. 代码完整性控制;4. 流完整性控制;5. 反模拟;

vConsole_vue移动端调试

当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成

如何调试javascript代码?

有时代码可能会包含某些错误。而作为脚本语言,JavaScript无法在浏览器中显示任何错误消息。但是,这些错误却会影响输出。找出这些错误的最佳做法就是调试代码。我们可以使用内置的Web浏览器调试器来轻松调试代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!