GoogleChrome開發者工具教學 - Network

前言

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

主要功用

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

第一個是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