Chrome 開發人員工具的「網路」面板是一項最常用的工具，可讓您深入瞭解網頁網路活動。
本文將分享 Ioana Forfota 和 Silvia Eremia 在 STEP 實習過程中所做的一系列非常期待的網路面板改善項目。一直以來，我們都等待了大量的改善工作，我們從 Chromium 的問題追蹤工具的大量待處理作業中，仔細挑選了這些改善項目，讓面板更容易使用、資訊更直覺易懂。
有了這些新功能，網頁程式開發人員便能在「網路」面板中執行以下操作：
- 只專注在相關的網路要求。
- 瞭解無需外部參照的 HTTP 狀態碼。
- 快速找出並處理要求錯誤。
- 瞭解 JSON 子類型回應。
如需瞭解所有詳細資訊，請繼續閱讀！
篩選 Chrome 擴充功能要求
Chrome 擴充功能可以提出自己的網路要求，這項要求會顯示在「網路」面板中的網頁要求旁。如果您未主動開發擴充功能，這些要求可能與您的需求無關。先前隱藏這類事件的唯一方法，是使用 -scheme:chrome-extension 篩選器，或是在無痕模式中偵錯。
自 Chrome 117 版起，這項功能變得更加容易。為整理「Network」面板，開發人員工具現在提供用來排除 Chrome 擴充功能要求的核取方塊。
我們仍在討論這項功能預設狀態。我們一開始預設考慮啟用這項功能，因為這可讓大多數使用者享有更好的使用體驗。不過，這種做法可能會讓部分使用者無從察覺 Chrome 擴充功能網址可觸發要求。這也可能對擴充功能開發人員帶來挑戰。因此，預設狀態會設為「已停用」。
這個核取方塊開啟後，要求清單會較簡潔、較不干擾，並且專注於處理最重要的要求，讓您享有更愉快的偵錯體驗！
HTTP 回應狀態文字
瞭解 HTTP 狀態碼對於有效偵錯至關重要。然而，持續搜尋它們的含意可能並不容易。開發人員工具已推出實用的強化功能：只要將遊標懸停在要求清單中的狀態碼上，工具提示就會立即提供狀態文字，也就是說明其含義的描述性標題。
狀態文字也會顯示在程式碼旁的標頭檢視畫面中。這些功能先前僅適用於 HTTP/1.1，但現在已延伸至 HTTP/2 和 HTTP/3。這些看似小幅調整的影響不大，不但能節省時間，還能讓您專心偵錯，不必搜尋程式碼意義。
增強的錯誤能見度
想要快速找出錯誤並修正問題，而不必深入查看面板。為了達到這個目的，我們加入了指示式圖示來吸引要求錯誤，例如狀態碼為 404 的錯誤訊息，而不是只醒目顯示文字顏色變更的錯誤訊息。這些細微卻實用的指標可讓錯誤更容易判斷，確保您不會忽略重大問題。
美化的 JSON 子類型
網站開發工作經常涉及檢查 JSON 回應，但讀取未格式化的原始 JSON 會使檔案變得不方便。處理這類回應 (尤其是 ld+json、hal+json 或 sparql-results+json 等子類型) 可能會感到困擾，例如在同一行顯示這類回應。為了簡化作業，開發人員工具導入了 JSON 子類型更易於使用且可收合的呈現方式。現在，這類回應會經過格式化，開發人員無需仰賴外部工具。新版設計以簡單易讀的方式呈現，
社群的正面意見
雖然這些功能只是早期採用階段，但大家都收到了許多正面意見。他們成功執行後，許多使用者都因為廣告的進步而獲得愉快的體驗，也大幅改善了使用體驗。你可以閱讀 X 上的部分回覆：
「喔，太棒了！Chrome 開發人員工具會顯示人類可讀的 HTTP 狀態碼，因此得以在遊戲領域大增，讓您輕鬆瞭解網路要求發生錯誤的原因。」- X 上的 TribalIdeas
「這項功能最近非常實用，特別是處理含有廣告攔截器和文法額外資訊的表單。」- MrAhmadAwais on X
準備好探索這些新功能了嗎？前往 Chrome 開發人員工具，親自體驗經過強化的網路面板。祝您偵錯愉快！
下載預覽管道
考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！
與 Chrome 開發人員工具團隊聯絡
使用下列選項，討論文章的新功能和異動，以及其他與開發人員工具相關的事項。
- 請透過 crbug.com 提交建議或意見回饋。
- 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示
>「說明」 >「回報開發人員工具的問題」。 - 在 @ChromeDevTools 張貼推文。
- 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。