大家好，我是烏木白，今天要和大家介紹如何從 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 檢視請求及回應