在前端开发中，我们经常需要查看网页发送的网络请求，但是当一个页面有大量请求时，很难快速定位到我们想要的请求。而谷歌浏览器开发工具提供了一种强大的网络请求过滤功能，可以让我们轻松地找到特定的请求。
过滤请求
打开谷歌浏览器，按下 F12 或者右键点击页面选择“检查”打开开发工具。切换到“网络”选项卡，我们可以看到所有网络请求的列表。
在这个列表上方，有一个搜索框和四个过滤选项：All, XHR, JS, Doc。其中，“XHR”代表XMLHttpRequest类型，也就是前端通过 JavaScript 发送的异步请求；“JS”代表JavaScript脚本文件请求；“Doc”代表HTML文档请求。
点击“Doc”，我们只会看到HTML文档请求，如下图所示：
同样的，如果点击“XHR”，我们只会看到异步请求，如下图所示：
此外，我们还可以使用搜索框来搜索特定的请求。例如，输入关键字“api”，过滤结果如下图所示：
学习和指导意义
通过利用谷歌浏览器开发工具过滤网络请求的方法，我们可以快速地定位到特定的请求。这在调试接口、查找性能问题等方面非常有用。
此外，在前端开发中，我们需要对各种类型的请求有一定的了解。例如，异步请求是前端常用的一种数据交互方式，而JavaScript脚本文件则包含了网页的动态行为和逻辑。因此，学习如何利用谷歌浏览器开发工具过滤网络请求，也可以帮助我们更好地理解和掌握前端技术。
示例代码
以下是一个简单的Ajax示例代码，用于发送异步请求并获取服务器返回的数据：
-- -------------------- ---- -------
-------- --------- --------- -
--- --- - --- -----------------
--------------- -----
---------- - ---------- -
-- ----------- --- ---- -
---------------------------
-
--
-----------
-
----------------- -------------- -
------------------
---在使用谷歌浏览器开发工具过滤请求时，我们可以选择“XHR”过滤选项来只显示异步请求，如下图所示：
这样，我们就可以更轻松地找到这个异步请求了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11613
