前言
在前端开发过程中，我们经常会使用 XMLHttpRequest (XHR) 对象来进行异步请求。但有时候我们可能会遇到一些问题，比如请求没有发送，或者返回的数据不符合预期等。这时候，我们就需要使用 Chrome 开发工具来找到 XHR 请求的源头，以便快速定位问题并解决。
步骤
1. 打开 Chrome 开发工具
打开 Chrome 浏览器，按下 F12 键或点击菜单栏中的“更多工具”-“开发者工具”即可打开 Chrome 开发工具。
2. 打开 Network 面板
在 Chrome 开发工具中，选择 Network 面板。如果 Network 面板没有显示出来，可以通过点击顶部工具栏中的“Network”按钮来显示。
3. 发送 XHR 请求
在页面中发送一个 XHR 请求，可以通过代码来实现，例如：
----- --- - --- ----------------- --------------- ------------- -----------
4. 查看 XHR 请求
当 XHR 请求被发送后，可以在 Network 面板中看到该请求的详细信息。在 Network 面板中，可以看到每个请求的 URL、请求方式、响应时间、响应状态码等信息。
5. 定位 XHR 请求的源头
在 Network 面板中，可以看到 XHR 请求的详细信息。如果请求没有发送或者返回的数据不符合预期，可以通过查看每个请求的详情来找到问题所在。
可以通过以下方式来定位 XHR 请求的源头：
- 查看请求的 URL 是否正确；
- 查看请求的请求头和请求体是否正确；
- 查看响应的状态码和响应头是否正确；
- 查看响应的数据是否符合预期。
6. Debug XHR 请求
如果需要对 XHR 请求进行调试，可以在 Network 面板中选择该请求，并在右侧面板中查看详细信息。可以查看请求和响应的头部信息、请求和响应的数据等。如果需要修改请求或响应的数据，可以通过右键点击请求并选择“Replay XHR”来重新发送请求。
总结
在前端开发过程中，使用 Chrome 开发工具来定位 XHR 请求的源头是非常重要的。只有通过快速定位问题所在，才能更快地解决问题。同时，Debug XHR 请求也是非常重要的，可以帮助我们更好地理解请求的细节，从而提高开发效率。
示例代码
下面是一个使用 XMLHttpRequest 发送 GET 请求的示例代码：
----- --- - --- -----------------
--------------- -------------
---------- - ---------- -
-- ----------- --- ---- -
------------------------------
- ---- -
------------------------------
-
--
----------- - ---------- -
---------------------- --------
--
-----------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30651