What's 開發人員工具的新功能 (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

覆寫網路回應標頭

您現在可以在「Network」面板中覆寫回應標頭。先前您必須存取網路伺服器，才能測試 HTTP 回應標頭。

您可以使用回應標頭覆寫值，在本機為各種標頭製作修正程式原型，包括但不限於：

如要覆寫標頭，請依序前往「Network」>「Headers」>「Response Headers」，將滑鼠游標懸停在標頭值上，然後按一下 。 並進行編輯。

透過標頭覆寫修正 CORS 錯誤。

您也可以新增自訂標頭。

新增自訂標頭。

如要編輯所有覆寫值，請依序前往「來源」 >「覆寫值」，編輯 .headers 檔案。您也可以點選「Add override rule」，使用萬用字元 (*) 覆寫多項要求。

編輯所有覆寫值。

Chromium 問題：1288023。

Nuxt、Vite 和 Rollup 偵錯功能改善

為協助您在偵錯期間更快找出問題，強化版堆疊追蹤現在會隱藏來自 Nuxt 3.3 以上版本產生來源的框架。開發人員工具會略過這類影格：

  • 在 Console 追蹤記錄的「Show N more frames」連結下方。
  • 在「Sources」 >「Call Stack」下方的 核取方塊。 下方，點選「Show ignored frames」。

啟用第三方忽略清單前後的堆疊追蹤記錄。

為了提供這些改善項目，開發人員工具、Nuxt、Vite 和 Rollup 團隊合作採用 x_google_ignoreList 來源對應擴充功能：

開發人員工具團隊要感謝 Nuxt、Vite 和 Rollup 團隊的協助，讓這項功能得以實現。感謝您付出努力和合作，這對這項導入作業的成功至關重要。再次感謝你的貢獻！

「元素」>「樣式」中的 CSS 改善功能

無效的 CSS 屬性和值

為協助您更快診斷 CSS 問題，樣式窗格現在會標示下列項目：

  • CSS 屬性無效時的完整 CSS 宣告 (屬性和值)。
  • 只有 CSS 屬性有效，但值無效時的值。

無效的屬性名稱和屬性值。

開發人員工具團隊要感謝Yisi(一絲)，感謝她完成這項改善。

動畫縮寫資源中的關鍵影格連結

animation CSS 簡寫屬性現在包含對應 @keyframes at-rule 的連結，方便您更快速地瀏覽 Styles 窗格。

動畫縮寫屬性中的關鍵影格連結。

Chromium 問題：1420656。

新版控制台設定：按下 Enter 鍵後自動完成

從上一個版本 (112) 開始，您可以設定開發人員工具控制台，在您按下 Enter 時套用自動完成建議。

根據預設，只要按下 Tab 或 Arrow right 即可接受自動完成建議。如要使用 Enter 進行自動完成，請依序前往「設定」 >「控制台」 > 核取方塊。「按下 Enter 鍵時接受自動完成建議」，啟用 。。

在「設定」中找到對應的核取方塊。

此外，另一個設定的文字現在更符合使用者需求：核取方塊。「將程式碼評估視為使用者動作」。

Chromium 問題：1276960。

指令選單強調已編輯的檔案

指令選單中的快速開啟對話方塊現在會將忽略清單中的第三方檔案設為灰色，以便更強調您建立的檔案。

在變更前後，快速開啟對話方塊中的忽略清單指令碼。

Chromium 問題：1424345。

JavaScript 分析器淘汰：第二階段

早在 Chrome 58 時，開發人員工具團隊就已計劃最終淘汰 JavaScript 分析工具，並讓 Node.js 和 Deno 開發人員使用「效能」面板來剖析 JavaScript CPU 效能。

開發人員工具 113 版開始實施 四階段 JavaScript 分析器 淘汰第二階段。在這個階段，您仍可開啟面板，但其 UI 已無法使用。

如要分析 CPU 效能，請按一下「前往效能面板」。

停用 JavaScript 分析器。

Chromium 問題：1354548。

其他精選內容

以下是這個版本中值得注意的修正項目：

  • 修正導致「Sources」面板中的漂亮列印功能無法正確處理含有 Unicode 字元的變數名稱的錯誤 (1425055)。
  • 「問題」分頁新增了有關非標準 HTML 值的自動填入問題新訊息 (1399414)。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。