iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Software Development

前端工程師不能不知道的生產力工具系列 第 9

[Day09] 瀏覽器開發工具 - 網路篇

  • 分享至 

  • xImage
  •  

當我們使用 LightHousePerformance 的面板找出前端程式可優化的地方,接下來就是看我們開發的應用,在進行網路請求的時候,速度上和資料的正確性是否都能符合預期。

接下來就切到 Network 面板一起練習看看吧!

選項與設定

上方的前兩排,主要是顯示請求紀錄的調整選項與設定。
而在第一排的在右方,有一個齒輪,點擊後可展開細部的選項,這些選項主要可以增加一些資訊量,幫助開發者解析。

Imgur

以我來說,比較常用的有

  1. 模擬連線的環境。例如想模擬手機的連線,可以選 Slow 3G
  2. 顯示所有請求的 Timeline,跟 Performance 的 Timeline 一樣可以範圍選取
  3. 顯示每個 frame 的頁面截圖
  4. 篩選請求紀錄表格的資源類型,例如只看非同步的請求,則選 XHR
  5. 清除請求紀錄的所有內容
  6. 可根據輸入文字篩選符合的路徑

錄製請求

Performance 一樣,我們可以使用錄製功能來紀錄特定期間的請求紀錄。通常會有兩個時機點與啟用方式 :

  • Ctrl+R : 頁面自動重新載入,並開啟錄製狀態
  • Ctrl+E : 啟動錄製狀態

結束後再按左上方的紅點 (Stop Recording network log),或按Ctrl+E結束錄製。

gif

調整表格欄位

在請求紀錄表格中,預設的顯示欄位並不會全部顯示。如果想要調整欄位的話,可以在表格標題處按右鍵,切換欄位的勾選狀態即可。

Imgur

分析請求內容

Imgur

當點選某一則請求時,右方會出現請求的詳細資訊,包括

  • Headers : 可以查看由前端發送出去與接收到的封包header資訊
  • Preview : 回傳資料的最佳預覽格式,方便開發者查看。
  • Response : 回傳資料的原始格式。
  • Initiator : 可以看發送請求的call stack
  • Timing : 以長條圖顯示各種狀態時的時間長度。

Imgur

小結

今天的內容相信有些經驗的開發人員都非常熟悉。如果有其他覺得實用技巧或操作流程,歡迎留言分享喔。

參考資源


上一篇
[Day08] 瀏覽器開發工具 - 效能篇(下)
下一篇
[Day10] 瀏覽器開發工具 - 資源篇
系列文
前端工程師不能不知道的生產力工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言