iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 26
1
自我挑戰組

網頁服務開發之路系列 第 26

Day 26. Chrome Develop Tool: Network

學習資源

  1. 使用Chrome的Web Developer Tool偵錯
  2. Network Panel說明
  3. Chrome 開發者工具裡看不到完整的 HTTP request 回應

Cookie vs Cache

  1. cookie
    1. 存放於 client 端用來存取使用者在瀏覽過程中的紀錄
    2. 方便sever的程式了解目前的進程以及使用者資料,通常用來記錄使用者名稱、帳號、上次到訪時間 ......
    3. 將資料存在使用者的電腦中,大多瀏覽器限制檔案大小不得超過 4096 Bytes,每個網站最多存放20個 Cookie
    4. 使用方式:Response.Cookies("變數名稱").Value=變數值
    5. 設定 Cookie 有效期限 Response.Cookies("變數名稱").Expires=Now.!AddDays(180) '180天後到期
    6. 限制:同一網域名稱的網頁才能存取該網站所儲存的 cookies
    7. 因為資料是存在使用者的電腦中,傳送時是以明碼方式傳送,機密資料不建議以此方式儲存
  2. cache
    1. 在browser URL 執行 about:cache,觀察
    2. 儲存 sever所需用到的資訊
    3. 多數與user無關
    4. 簡單說為 temporary files,其中大宗為圖檔,其他還有 javascript, xml...

Chrome Developer Tools:Network Panel說明

從網絡面板中可以獲取很多有用信息,如詳細的時間數據,http請求頭響應頭,cookies,WebSocket數據。

  1. 常用參數列
    1. Nameand Path: 請求資源的名稱和路徑
    2. Method: 請求方法,常用 get, post
    3. Status: HTTP狀態碼和文本信息
    4. Domain: 請求資源的MIMI類型
    5. Initiator: 發送請求的對象(ex. Parser, Redirect, Script, ...)
  2. 有的資源的 Initiator 一列為 Script,表示該資源通過某js加載的
  3. Sizeand content:size是http請求傳輸的真實大小,包括響應頭和響應體;content表示響應體解壓後的大小(如果有壓縮的話,一般為gzip壓縮)。如果採用了gzip編碼傳輸,一般情況content比size大,否則content小於size。如果資源是從瀏覽器緩存加載的而不是通過網絡獲取,則content為from cache
  4. Preserve log 保留歷史log
    1. 跳轉時想保留之前的日子,用preserve log選項。如果不勾選,每次刷新log就沒了,勾選上Preserve log,每次刷新都會保留log,比如刷新3次就會有三次請求的log。頁面跳轉到其他地址log也會保留
  5. Disable cache 禁用緩存
    1. 勾選Disable cache選項,可禁用緩存,所有的狀態碼為304的請求和size為from cache的請求變成正常請求

上一篇
Day25. HTTP 通訊協定 Part2: Cache & Cookie
下一篇
Day 27. Search Engine Optimization (SEO)
系列文
網頁服務開發之路30

尚未有邦友留言

立即登入留言