江苏龙网

  1. 首页 > 人文 > >

技术编程|如何使用Edge DevTools分析Web应用程序API



技术编程|如何使用Edge DevTools分析Web应用程序API
本文插图

如今 ， 我们编写的许多代码都依赖Web 。 毕竟 ， 如果您可以向HTTP添加自定义载荷 ， 为什么要开发新协议?如果已经有一个可扩展、灵活又安全的层 ， 无需在网络堆栈中创建新的层 。 相反 ， 我们可以充分利用HTTP中的GET和POST函数 ， 并使用充分利用REST的API 。
是的 ， 这过于简单 ， 但实际上很少有场合需要全新的东西 。 HTTP是一种简化 ， 但也是一种混淆 。 如果我们使用的一切其底层都是HTTP ， 我们为何构建可处理那些API的测试和开发工具?
虽然Open API Initiative及其他方法对于规范如何描述和实现基于HTTP的API大有帮助 ， 但我们通常把各种不同的工具拼凑起来以构建和测试API调用 。 Postman可能是最流行最熟悉的工具 ， 但是它与我们的开发环境和浏览器分开来 ， 因此很难确信我们在应用程序的上下文中设计和测试HTTP调用 。
Edge开发工具的Chromium演变
微软在新的Edge浏览器中改用Chromium使它有机会扩展其内置的开发工具 ， 夯实其在Trident和EdgeHTML中开发工具的自身历史以及在Chromium开源项目中所做的工作 。 这款浏览器稳定版和开发版的每个版本都增添了新工具 ， 这些新工具在F12控制台中和试验性标志后面 。
该实验性开发工具值得探究 ， 因为它含有许多实用的工具 ， 虽然还没有达到生产级水平 ， 但仍可以帮助您解决代码中的重大问题 。 要开启它们 ， 使用F12启动DevTools面板 ， 然后在工具窗格或窗口的右上角点击“设置”图标 。 在“设置”屏幕中 ， 选择“试验” ， 然后选择想要使用的新功能 。
最新的稳定版Edge 85含有几个试验性新工具 ， 包括迫切需要的CSS Grid调试器 。 然而 ， 最有意思的新功能让您可以在新的Network Console(网络控制台)中编辑和重放网络事件 。
结合使用Network Console和REST API
【技术编程|如何使用Edge DevTools分析Web应用程序API】乍一看 ， 这种方法可以记录和分析HTTP请求 ， 捕获最近的活动 ， 并深入分析常规HTTP响应代码之外的服务器响应 。 如果您在处理REST API ， 并使用浏览器进行调试 ， 就知道除了200 OK消息外 ， API还有很多其他意思 ， 如果您通过REST代理或API代理来工作更是如此 。 知道为您的API充当门面的HTTP服务器在运行与知道API返回您期望的值不一样 。
Edge DevTools Network Console的真正优点是 ， 可以用它迅速试用HTTP API ， 无需编写任何代码 。 您可能用过Postman之类的工具做到这点 ， 但它们不在浏览器中 ， 最适合从头开始开发和测试API 。 Network Console的工作原理类似 ， 为您提供了快速试用API URL的机制 。
构建和测试HTTP查询
要测试API ， 从F12打开空白的Network Console ， 然后点击“创建请求”以打开HTTP查询构建器 。 您可以从常见的HTTP查询指令中进行选择 ， 包括充分利用REST的API中所用的常见的POST和GET查询 。 先使用常见的API资源管理器(比如微软的Graph Explorer或Swagger Pet Store) ， 核查您在正确构建请求 ， 而且您了解如何使用身份验证令牌来处理受限制的API 。
一旦完成了查询 ， 该工具会显示状态响应、查询所花的时间以及响应大小 。 您可以下载响应JSON来测试解析器 ， 也可以在控制台中预览 。 除了响应正文、所有标头和cookie外 ， 内置的JSON预览还会解析响应并显示键/值对 。
本质上讲 ， 这是很简单的工具 ， 但常常正是您需要的 。 现阶段 ， 最好将Edge DevTools Network Console视为一种快速的临时测试工具 。 重放录制网络活动的功能与服务器端性能测试工具结合使用大有帮助 。 您可以将相同的流量发送到服务器 ， 以便自动重现有问题的交互 。
在控制台中编辑调用的功能很有用 ， 因为您可以从页面内部内容捕获API调用 ， 然后将它们用作测试的基础 ， 并根据需要调整内容 。 安全工程师会发觉这种方法很方便 。 他们可以识别针对网站或服务的潜在攻击 ， 然后对异常的载荷进行试验以探究故障模式 。
未来需要什么?
为了使这样的工具可以替代Postman ， 它确实需要更多功能 ， 比如能够导入Open API定义 。 Swagger格式的JSON是交换来自开放服务(比如Microsoft Graph)的API信息的标准方法 。 如果您可以将这些定义导入到Network Console中以选择要测试的API(以及Open API自我文档功能) ， 开发人员可以使用浏览器来浏览可用的API ， 并在将定义导入到开发环境之前对其进行尝试 。 就目前而言 ， 有某种形式的导入函数 ， 但尚不清楚集合或环境的含义 ， 不过两者都无法适用于Open API JSON文件 。
微软在努力向新的Edge轻松过渡 ， 推出了一系列高质量的稳定版 。 很高兴看到DevTools团队使用它进行创新 ， 并为开发人员提供一套简便的浏览器内工具 ， 可让您深入了解代码的运作方式 。 新的Network Console在此基础上更进一步 ， 可以处理您的API 。
遗憾的是 ， 该工具尚无法与面向Visual Studio Code的Edge Network插件配合使用 ， 但是很容易看到将来的更新版如何支持您的本地API开发 ， 帮助您无需离开编辑器就可以在本地系统上构建和测试REST API 。 有了Code的Electron基础 ， 微软就比较容易添加这样的浏览器工具 ， 以一种迫切需要的、对开发人员友好的方式 ， 打破编辑器和运行时环境之间的壁垒 。


    推荐阅读


    上一篇：iQOO手机|iQOO Neo3：用极致性价比，开启年轻人的5G初体验

    下一篇：一加手机|硬核配置 + 猛男粉加持，一加 8 降价更诱人