VSCode的Rest扩展尝试——极简Api测试方案

这是一款中国人自己开发的插件,有兴趣可以关注下作者本人。之前介绍过webapi的测试工具,有Postman、Fiddler等,现在是时候拜托它们的时候了。

1、安装

可以在Visual Studio市场或VS Code的扩展资源管理器中找到该扩展:

https://marketplace.visualstudio.com/items?itemName=humao.rest-client
如果您点击此链接,您将找到有关扩展,有非常不错的如何工作以及如何使用的文档。这也意味着这篇文章是没有用的,除了您想阅读快速概述;-)
在这里插入图片描述

REST Client扩展的源代码托管在GitHub上:
https://github.com/Huachao/vscode-restclient

该扩展程序得到积极维护,下载数非常大,并由250多人提供了很棒的评级(5分中的5.0分)

2、它能解决什么?

与Fiddler和Postman相比,它绝对是简约的。没有炫目且功能完善的UI。尽管Fidler功能齐全,但Postman的UI更好,更轻松,更直观,但是REST Client完全不需要UI,除了VSCode shell和纯文本编辑器。

和Fiddler和Postman无法轻松共享请求配置不同,REST客户端使用* .http或* .rest扩展名将请求配置存储在文本文件中,扩展名可以提交给源代码存储库并与整个团队共享。
在这里插入图片描述

3、让我们看看它是如何工作的

为了在演示中对其进行测试,让我们创建一个新的Web API项目,转到项目目录,然后打开VSCode:

dotnet new webapi -n RestClient -o RestClient
cd RestClient
code .

该项目已经包含一个Web API控制器。我将在REST Client的第一个小测试中使用它。稍后我将在博客文章中创建并使用更复杂的控制器

为了将* .http文件放在一个位置,我创建了一个ApiTest文件夹并将其放置WeatherForecast.http在其中。我不确定将此类文件放入项目是否有意义,因为这些文件不会投入生产。我认为,在现实世界的项目中,我会将文件放置在实际项目文件夹之外的某个位置,但要放在源代码存储库中。让我们暂时保留它:
在这里插入图片描述
我已经将以下行放入该文件中:

GET https://localhost:5001/WeatherForecast/ HTTP/1.1

这只是带有文件扩展名的纯文本文件中的简单文本行,*.http是REST Client扩展的一部分,在解析它时具有一些很酷的魔术:

在顶部边框上,您可以看到REST Client扩展支持文件结构内部的导航。这很酷。在该行上方,它还将一个CodeLens可操作链接添加到已配置的请求中以发送该请求。

首先,通过按F5或dotnet run在Shell中使用启动项目。

如果项目正在运行,则可以单击“发送请求代码镜头”链接,然后查看会发生什么。
在这里插入图片描述
它将在VSCode中的新选项卡组中打开响应,并显示响应标题和响应内容

4、更复杂的例子

我创建了另一个处理人员的API控制器。在PersonController使用GenFu创建假的用户。方法POST,PUT和DELETE并没有真正做任何事情,但是控制器可以很好地被测试。

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

using GenFu;

using RestClient.Models;

namespace RestClient.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class PersonController : ControllerBase
    {

        [HttpGet]
        public ActionResult<IEnumerable<Person>> Get()
        {
            return A.ListOf<Person>(15);
        }

        [HttpGet("{id:int}")]
        public ActionResult<Person> Get(int id)
        {
            var person = A.New<Person>(new Person { Id = id });
            return person;
        }

        [HttpPost]
        public ActionResult Post(Person person)
        {
            return Ok(person);
        }

        [HttpPut("{id:int}")]
        public ActionResult Put(int id, Person person)
        {
            return Ok(person);

        }

        [HttpDelete("{id:int}")]
        public ActionResult Delete(int id)
        {
            return Ok(id);
        }
    }
}

该Person模型很简单:

namespace RestClient.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Telephone { get; set; }
        public string Street { get; set; }
        public string Zip { get; set; }
        public string City { get; set; }
    }
}

如果现在启动项目,则将在Web API项目中已配置的Swagger UI中看到新的端点。调用以下URL以查看Swagger UI:https://localhost:5001/swagger/ index.html

在这里插入图片描述
好的。开始吧。我创建了一个名为新文件Person.http中ApiTests的文件夹。您可以将多个REST Client请求配置添加到一个文件中。

我们不需要两个GET端点和DELETE端点的Swagger UI,因为它们是简单的端点,并且看起来与中的相同WeatherForecast.http:

GET https://localhost:5001/Person/ HTTP/1.1

###

GET https://localhost:5001/Person/2 HTTP/1.1

### 

DELETE https://localhost:5001/Person/2 HTTP/1.1

POST请求稍微复杂一点

如果现在/Person在Swagger UI中打开POST部分并尝试请求,您将获得REST Client所需的所有信息:

在这里插入图片描述
在http文件中,它将如下所示:

POST https://localhost:5001/Person/ HTTP/1.1
content-type: application/json

{
  "id": 0,
  "firstName": "Juergen",
  "lastName": "Gutsch",
  "email": "juergen@example.com",
  "telephone": "08150815",
  "street": "Mainstr. 2",
  "zip": "12345",
  "city": "Smallville"
}

您可以对PUT请求执行相同的操作:

PUT https://localhost:5001/Person/2 HTTP/1.1
content-type: application/json

{
  "id": 2,
  "firstName": "Juergen",
  "lastName": "Gutsch",
  "email": "juergen@example.com",
  "telephone": "08150815",
  "street": "Mainstr. 2",
  "zip": "12345",
  "city": "Smallville"
}

如果您单击GET请求的CodeLens链接,这就是VSCode中的样子:
在这里插入图片描述
现在,您可以通过这种方式测试所有API端点。

5、小结

实际上,这不仅能测试REST api,您可以通过这种方式测试任何类型的HTTP请求。您甚至可以将二进制数据(例如图像)发送到端点。

对于VSCode来说,这是一个非常不错的扩展,我敢肯定,我只会在没有安装VS Code的环境中使用Fiddler或Postman。

说了半天,你心动了吗?心动不如行动,关注楼主,不迷路!

### 回答1: 要在 Visual Studio Code 中调试 REST API,你需要执行以下步骤: 1. 在 Visual Studio Code 中安装支持调试的插件,例如 "Debugger for Chrome" 或 "Rest Client"。 2. 在 Visual Studio Code 中打开要调试的 REST API 项目。 3. 在 Visual Studio Code 中打开调试菜单,并选择 "Add Configuration"。 4. 选择要使用的调试器(如 "Chrome" 或 "Rest Client"),然后按照提示创建调试配置文件。 5. 在 Visual Studio Code 中打开调试菜单,并选择 "Start Debugging"。 6. 在调试器中输入要测试的 REST API 请求,然后按 "Send Request" 按钮发送请求。 7. 调试器会显示请求的响应以及相关的调试信息。 希望这些信息对你有帮助! ### 回答2: 使用VSCode来调试REST API十分方便。首先,确保已经安装了VSCode和相关插件。接下来,按照以下步骤进行调试: 1. 打开VSCode并创建一个新的工作空间。 2. 在目录中创建一个名为“launch.json”的文件。此文件将用于配置调试会话。 3. 打开“launch.json”文件并添加一个新的配置项。示例如下: ``` { "version": "0.2.0", "configurations": [ { "name": "Debug REST API", "type": "node", "request": "launch", "program": "${workspaceFolder}/app.js", // 替换为你的入口文件 "cwd": "${workspaceRoot}", "args": [ "--inspect=9229" ], "outFiles": [ "${workspaceFolder}/**/*.js" ] } ] } ``` 4. 替换上述配置项中的`program`字段为你的REST API的入口文件路径。 5. 在VSCode的底部选择调试视图。 6. 在调试视图中点击"运行"按钮来启动REST API的调试会话。 7. 此时,VSCode将自动在`9229`端口上启用调试器。 8. 在浏览器中访问REST API的地址并执行相关操作。 9. 当请求到达API时,VSCode将自动中断执行并在调试视图中显示相关的调用栈信息和变量值。 10. 使用调试视图中的调试控制按钮(如暂停、继续、单步执行等)来进行调试操作。 11. 在VSCode中修改代码后,保存并刷新浏览器以重新开始调试。 通过以上步骤,你可以使用VSCode轻松地调试REST API,并且能够方便地检查代码和变量的状态,加快开发调试的效率。 ### 回答3: 要使用VSCode调试REST API,可以按照以下步骤进行操作: 第一步:安装VSCode和适当的插件 首先,确保你已经安装了最新版本的Visual Studio Code编辑器。然后,在VSCode扩展市场中搜索并安装合适的插件,例如"REST Client"插件。 第二步:创建一个REST API请求文件 在VSCode中创建一个新文件,并将其保存为`.http`或`.rest`扩展名。这种类型的文件被称为“HTTP 客户端请求文件”,它可以包含你的REST API请求和期望的响应。 第三步:编写REST API请求 使用合适的语法来编写你的REST API请求。这通常包括请求的方法(例如GET、POST、PUT等)、URL和请求正文(如果有的话)。可以在文件中编写多个请求,每个请求占用一个独立的区块。 第四步:发送REST API请求 使用REST Client插件提供的“发送请求”功能,向你的REST API发送请求。你可以通过按下`Ctrl + Alt + R`(Windows)或`Cmd + Alt + R`(Mac)快捷键来发送当前请求。 第五步:调试REST API 要在VSCode中调试REST API请求,可以在`.http`或`.rest`文件中插入调试断点。在代码行的左侧单击空白处,以在该行上设置断点。当你发送请求时,它将停在断点处,以便你可以逐步调试请求和响应。 第六步:查看调试输出 当程序停在断点处时,你可以查看请求的详细信息和响应的结果。VSCode的调试窗口会提供有关网络请求和响应的所有信息,包括请求和响应头、请求和响应正文。 总结: 通过使用VSCode和适当的插件,你可以方便地调试REST API。通过编写REST API请求文件、发送请求、设置调试断点和查看调试输出,你可以轻松地检查和验证你的API请求和响应。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

webmote

如果能帮到你,请支持下博主

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

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

打赏作者

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

抵扣说明:

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

余额充值