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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

覆寫網路回應標頭

您現在可以在「網路」面板中覆寫回應標頭。過去，您必須存取網路伺服器，才能實驗 HTTP 回應標頭。

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

如要覆寫標頭，請依序前往「網路」>「標頭」>「回應標頭」，將游標懸停在標頭值上，按一下 。 並編輯。

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

您也可以新增自訂標頭。

新增自訂標頭。

如要集中編輯所有覆寫內容，請在「來源」 >「覆寫」中編輯 .headers 檔案。您也可以點選「新增覆寫規則」，使用萬用字元 (*) 覆寫多個要求。

編輯所有覆寫項目。

Chromium 問題：1288023。

改善 Nuxt、Vite 和 Rollup 的偵錯功能

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

  • 在「控制台」追蹤記錄中，按一下「顯示 N 個以上影格」連結。
  • 在「來源」 >「呼叫堆疊」下方，按一下「顯示已忽略的影格」核取方塊。。

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

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

開發人員工具團隊要感謝 Nuxt、Vite 和 Rollup 團隊，因為有他們，我們才能完成這項工作。感謝您付出心力並與我們合作，這對實作作業的成功至關重要。再次感謝你的貢獻！

「元素」>「樣式」中的 CSS 改善項目

無效的 CSS 屬性和值

為協助您更快診斷 CSS 問題，「樣式」窗格現在會劃掉：

  • CSS 屬性無效時，整個 CSS 宣告 (屬性和值)。
  • 如果 CSS 屬性有效，但值無效，則只會顯示值。

屬性名稱和屬性值無效。

開發人員工具團隊要感謝 Yisi(一丝) 實作這項改善功能。

動畫速記屬性中的主要畫面格連結

animation 簡寫 CSS 屬性現在包含對應 @keyframes at 規則的連結，方便您更快瀏覽「樣式」窗格。

動畫速記屬性中的主要畫面格連結。

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。

其他亮點

這個版本的重要修正項目包括：

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

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。