GoogleChrome開發者工具教學 - Network


前言

今天要來介紹前後端工程師的共同朋友-Network啦!(為什麼聽起來這麼像在相親)當我們打開開發者工具再按Network時可以看到下面的畫面。

主要功用

💡 分析當前頁面對伺服器請求的資訊,包含API名稱、狀態、種類、時間、流量變化…各種資訊

今天會介紹紅框圈起來的幾個小東西~

第一個是Filter系列,也就是上面圖片最上面的紅框。可以針對請求的種類不同去進行篩選和歸類,如果是用上面filter框框的話,則是會套用紅框已選的種類再去針對filter框框內容去做篩選。下面就來簡單介紹紅框的圈起來的各種功能吧

  • All : 不會對請求去做任何篩選,會直接把所有請求列出來
  • Fetch/XHR :Fetch API 以及 XMLHttpRequest 的請求,出現於使用 Ajax 的網頁
  • JS: 會撈出這個頁面使用到的JavaScript資源
  • CSS: 會撈出這個頁面使用到的CSS資源
  • Img:圖片資源
  • Font:文字資源
  • Doc:HTML內容

至於WS、Wasm、Manifest我自己沒有使用過,上網找也沒找出什麼資訊就暫時先不介紹了。我自己最常用的其實是Fetch/XHR~因為我會需要看API的狀態或是回傳內容。

再來看到Status和Type,這兩個分別代表請求的狀態和種類

  • Status : 可以去確認請求是否有成功,最常見的status為 2xx、4xx、5xx,每個Status代表的意義也都不一樣。
    • 200 ⇒ 請求成功
    • 400 ⇒ Bad request
    • 401 ⇒ unauthorized,連使用者是誰都不知道,通常就是未登入狀態
    • 403 ⇒ forbidden,已知使用者是誰但該使用者沒有權限取得資料
    • 404 ⇒ not found,找不到資源,這應該超級常見xD
    • 500 ⇒ 伺服器端有問題
  • Type: 請求種類,通常為fetch或XHR

來看到上面圖片左下角有個 2/33 Requests, 2代表符合在這個篩選條件下出來的結果,33則是這個頁面載入所發出的所有請求數量

點進每個請求會發生什麼事情呢?

答案是…….你會看到這個請求的各種資訊xD

  • Headers :可以看到這個請求是用什麼方法(request method)、請求狀態(status code)、response header、request headers

  • Payload: 當發出請求的時候,會夾帶那些參數去撈取請求的資料

  • Preview & Response : 這兩個基本上會記錄回傳的內容,只是Preview的閱讀性比較高

結論

如果以後哪個網站掛掉,可以試著打開開發者工具的Network來確認一下是哪個請求造成頁面壞掉,再來進一步去追程式碼去看是哪個橋段Q掉了~如果你不是工程師也是可以打開來看一下密密麻麻的請求們xD(我就問誰會沒事打開開發者工具???大概只有像我這種有職業病的人才會沒事打開來看xD

#GoogleChrome #開發者工具 #Network






你可能感興趣的文章

終端機顯示Cannot find module 'sass'

終端機顯示Cannot find module 'sass'

筆記、[FE101] 前端基礎 各種裝飾

筆記、[FE101] 前端基礎 各種裝飾

實作 Redux(六):總結、流程

實作 Redux(六):總結、流程






留言討論