Chrome審查元素使用：[2]Network

2019-12-19 02:47:13

Chrome是一個強大的瀏覽器，不僅存取網頁速度快，而且提供了功能強大的分析工具，下面說下【審查元素】中的【Network】如何使用。

隨便開啟一個需登入的網頁。如下圖，只有使用者名稱和密碼框。可以看到開啟時，開啟時建立了三條連線，分別是網頁，CSS布局檔案和JS檔案。方法都是GET，狀態都是200（成功）。

點選相應的連線記錄，可以看到詳細資訊，如http請求資料包的頭，和http響應的頭。

選中preserve log（儲存紀錄檔，否則只顯示每次響應的連結）。可以看到有一條POST資料傳送了出去，POST的資料內容也可以看得到。

在詳細資訊裡面可以看到preview和response的內容，兩者大多數都是一樣的。Timing裡面顯示了連結開始到接收完資料的時間分布。

Filter是過濾出指定的內容。如style，jscript等包含特定字元的連結紀錄檔。

在百度登陸情況。同樣是一條POST資料，但是內容複雜的多了去了，賬號是明文，密碼是加過密的密文（保證賬號安全）。

那麼Network有什麼作用呢。在我看來它可以讓你了解一個網站的資料互動規則，還有一點應用是如果你想開發一個用戶端之類的，在脫離瀏覽器時，你就要清楚的知道傳送的資料內容的結構了（這個網站沒有給出API）。