害怕使用 Chrome 开发者工具？如何轻松检查 API 调用？

所以，你掌握了前端库和后端语言，并且构建了一系列全栈应用程序？太棒了。

最糟糕的情况是，当你身处前端团队，却与后端团队几乎没有沟通（或者文档有限）时。

或者，如果你加入了一个新团队，前端代码库过于庞大，你甚至不知道你向后端发送了什么请求，又收到了什么响应，那该怎么办？

我将教你如何在 Chrome 开发者工具中使用“检查网络调用”功能

我知道您可能想知道为什么我们不使用 Postman。原因在于，Postman 允许您使用自定义的请求头和请求体来调用特定的 API 端点。而使用 Chrome 开发者工具，您可以查看应用在执行某些操作（例如点击按钮）时调用了哪些 API 端点，从而更好地了解应用的运行机制。

总之，请访问https://dev.to，右键单击任意区域，然后点击Inspect“开发者工具”选项卡。在 Chrome 开发者工具中，点击该Network选项卡。您应该会看到类似这样的界面。 请留意左上角的图标，它会清除一些记录，稍后您就会看到。

clear

点击LatestDEV 社区网站上的标签页。在你的开发者工具中，你会看到一系列 API 调用。

如果它是一个类型xhr，那就意味着这是一个 API 调用（XMLHttpRequest）。有些类型可能含义模糊，而另一些则可能看起来比较熟悉。

你从中学到了什么？简单来说，如果你点击一个按钮，并期望它调用后端，但如果 Chrome 开发者工具中没有如你所愿地反映出来，那就该修复你的代码了！

另外，请注意查询字符串参数。在“查询字符串参数”Payload选项卡下，您会看到附加到基本 URL 的查询字符串参数（用于后端）。例如，对于 URL `/example.com` https://www.youtube.com?user=ishak&limit=20&category=latest，查询字符串参数如下：

• 用户：ishak
• 限20人
• 类别：最新

好了，各位。如果Chrome开发者工具对你来说没那么可怕了，那你欠我一个人情……

LIKE 👍