在 Chrome 開發人員工具中，網路面板是提供網頁網路活動相關洞察資料最常用的工具之一。
本文將分享 Ioana Forfota 和 Silvia Eremia 在 STEP 實習期間，對「Network」面板提出的一系列改善建議。這些改善項目是我們從 Chromium 問題追蹤器的大量待處理項目中精心挑選，讓面板更易於存取、更直覺且資訊豐富，讓使用者引頸期盼。
有了這些新功能，網頁開發人員就能透過「Network」面板執行以下操作：
- 只著重於相關網路要求。
- 瞭解 HTTP 狀態碼，無須參照外部資源。
- 快速找出並解決要求錯誤。
- 瞭解 JSON 子類型回應。
如需瞭解所有詳細資訊，請繼續閱讀！
篩選 Chrome 擴充功能要求
Chrome 擴充功能可以自行發出網路要求，這些要求會與網頁要求一併顯示在「Network」面板中。如果您並未積極開發擴充功能，這些要求可能與您無關。以往要隱藏這些廣告，唯一的方法就是在無痕模式中使用 -scheme:chrome-extension 篩選器或進行偵錯。
從 Chrome 117 開始，這項操作變得更簡單。為避免「網路」面板過於雜亂，開發人員工具現在提供核取方塊，可用於排除 Chrome 擴充功能請求。
我們一直在討論這項功能的預設狀態。我們一開始考慮預設啟用這項功能，希望能為大多數使用者提供更優質的體驗。不過，這麼做可能會讓部分使用者不知道 Chrome 擴充功能網址會觸發要求。這也可能對擴充功能開發人員造成挑戰。因此，預設狀態會設為「停用」。
勾選這個核取方塊後，要求清單會變得更簡潔，減少干擾，讓您能更專注於最重要的要求，享受更愉快的偵錯體驗！
HTTP 回應狀態文字
如要有效進行偵錯，就必須瞭解 HTTP 狀態碼。不過，不斷搜尋意思可能會很不方便。DevTools 推出了實用的增強功能：當您將游標懸停在要求清單中的狀態碼上時，工具提示會立即顯示狀態文字，也就是說明其含義的描述性標題。
您也可以在程式碼旁的標頭檢視畫面中看到狀態文字。這些功能先前僅適用於 HTTP/1.1，現在已擴充至 HTTP/2 和 HTTP/3。這些看似微不足道的調整，其實影響重大，不僅可節省您的時間，還能讓您專注於偵錯，而非搜尋程式碼意義。
改善錯誤顯示
您現在可以更輕鬆地快速找出錯誤並加以修正，無須深入研究面板。為達成這項目標，我們除了透過變更文字顏色來醒目顯示錯誤訊息，還新增了指示圖示，以便提醒使用者注意請求錯誤，例如狀態碼為 404 的錯誤。這些細微但實用的指標可讓您更容易發現錯誤，確保您不會忽略重要問題。
美化 JSON 子類型
網頁開發作業經常需要檢查 JSON 回應，但讀取未經格式化的原始 JSON 非常不方便。處理這類回應 (特別是 ld+json、hal+json 或 sparql-results+json 等子類型) 可能會令人感到困擾，例如當這些回應出現在單一行時。為簡化操作，DevTools 為 JSON 子類型推出了更符合使用者需求的收合式介面。這些回應現在已完成格式設定，開發人員不必再仰賴外部工具。這項重新設計可提供簡單易讀的呈現方式。
社群的正面意見回饋
雖然這些功能仍處於採用初期，但社群反應非常正面。他們成功導入這項功能，讓許多使用者都對改善後的體驗感到滿意，大幅提升使用體驗。你可以在 X 上查看部分回覆：
「喔，真不錯！Chrome 開發人員工具剛剛升級，現在會顯示人類可讀的 HTTP 狀態碼，讓您更容易查看網路要求發生錯誤的原因。」—TribalIdeas on X
準備好探索這些新功能了嗎？前往 Chrome 開發人員工具，親自體驗強化版的「網路」面板。祝您偵錯愉快！
下載預覽管道
建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！
與 Chrome 開發人員工具團隊聯絡
請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。
- 請前往 crbug.com 提交意見回饋和功能要求。
- 在開發人員工具中，依序按一下「more_vert」更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
- 在 Twitter 上傳送訊息給 @ChromeDevTools。
- 在 YouTube 影片「What's new in DevTools」或「開發人員工具提示」YouTube 影片中留言。