Day22 如何查看使用 Chrome Devtools 检视请求及回应

大家好，我是乌木白，今天要和大家介绍如何从 Chrome Devotools，来查看 AJAX 的回应成功？

先打开 Chrome 开发者工具 > Network

1. 一定要开启分页
2. 要选择 要打开的这个，有亮才是Recoding
3. 开启过滤器，选择XHR。

重新整理网页後

1. 载入这个网页的时间
2. 载入的某段程序码
3. 档案大小
4. 此档案载入时间
5. 载入的目标资源
6. 状态码

接下来我们选择其中一个 载入的目标资源，会看到以下

• Headers：请求及回应的标头，这些标头就像我们发寄信时，信封袋上所写的内容，要明确的标注住址、收件人、电话等等资讯，才能确保信件能正确寄达，Headers 所挟带就是这些资讯，不管是浏览器、服务器都会有一份。
• Preview, Response：这两者资讯是相同的，也就是服务器回传的资料，Preview 仅是 Response 的 “好读版”。
• Timing：本次请求至回应所耗费的时间。
• Cookie：本次请求、回应相关的 Cookie 内容。

Header

General

1. Request Url: 请求的网址
2. Request Methoud: 请求的方法
3. Status Code: 状态码
4. Request Headers: 请求表头，请求的表头内容必须是服务器能够接收的格式、内容，不过现在大多都会避免前後端开发时发生不需要的错误，所以仅利用在必要的验证。
5. Response Headers: 回应表头，由服务器回传至浏览器端的表头，但由於是由後端传给予前端，资讯也与请求的大不相同。

Preview, Response

相对於 Headers 来说其它几个内容较单纯，Preview, Response 这两者内容完全相同， Preview 是经过 format 美化的版本，从中取得所要资讯即可。

Timing

Timing 是网页开启後，从发出请求直到回应内容时间轴。

Cookies

服务器储存於浏览器的资讯，此分页中可以看到服务器对於浏览器端的 Cookie 储存

结语

虽然在写 AJAX 的程序码不多，但是如果可以了解到这些资讯，对於除错的方式，会更加方便许多喔！

资料来源：
AJAX 完整解说系列：使用 Chrome Devtools 检视请求及回应