台灣的Web工程師

查看傳送與接收資料

有時候我們操作網頁時，會想要知道資料到底有沒有傳送到後端，或是後端傳送回來的資料是否正確，也提供了網路封包查看的功能，就是在Network的頁籤。

範例操作

1. 開啟Chrome視窗並連到Google頁面，並透過滑鼠右鍵的「檢查」開啟Chrome的下方視窗。

2. 切下方的視窗切到Network的頁籤，如下圖。

3. 先將資料清空（點擊下圖滑鼠位置），以方便後續我們的觀察。

4. 輸入「Yahoo」關鍵字後，按搜尋 （在輸文字的途中，我們可以發現資料一直跑出來，那是因為瀏灠器會去Google搜尋最符合的你想輸入的資料，所以一直發送Request）。

5. 找出我們想查看的該筆資料後，點擊它。

6. 我們可以看到視窗被切割為左右，而右邊的視窗，就是資料傳輸的內容，將右邊的視窗拉到最下方，可以看到我們送出的資料。

7. 我們可以發現上一張圖片的內容並無伺服器端的回傳資料，因為Chrome把它放在另一個頁籤，我們參考下圖的滑鼠位置，切到Response頁籤，來查看伺服器的回覆資料。

透過這種方式，就可以很簡單的追踪使用者與伺服器之間的互動資料；而且它還有一個方便之處，既使是HTTPS，因為Chrome會自動做幫HTTPS作加解密的功能，所以我們在Network頁籤上看到的，仍然是明碼，不會因為HTTPS而受影響。

保留資料

Network頁籤的預設是在網頁重新整理或是網頁被轉導時，會自動清空資料，可是某些時候，我想要瞭解網頁轉導的過程做了什麼，發了什麼資料出去，那是不是Network頁籤無法提供這樣的功能呢？不是的，Chrome的開發人員也瞭解大家的需求，所以將它做成一個選項，讓使用者自行決定要不要保留轉導時的資料，它的選項位置參考下圖：

透過這個選項的勾選，來決定是否要保留頁面重整或轉導時的資料，因為預設是不勾選，所以Chrome每次都會幫我們清除資料。

重點說明

這個Network的功能，已經算是HTTP(S)版用的Wireshark了，可以抓到HTTP(S)的封包資料，幫助開發人員確認使用者與伺服器之間的溝通內容，非常的好用，而且它也幫助我們解決HTTPS的加解密問題，對一個Web開發的工程師來說，真的是很常強大又好用的工具。