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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

覆寫網路回應標頭

您現在可以在「網路」面板中覆寫回應標頭。之前，您需要能夠存取網路伺服器，才能測試 HTTP 回應標頭。

透過回應標頭覆寫，您可以在本機針對各種標頭進行原型修正，包括但不限於：

如要覆寫標頭，請瀏覽至「網路」>標題 >回應標頭：將滑鼠遊標懸停在標頭值上，按一下 。 即可編輯。

因標頭覆寫而修正的 CORS 錯誤。

也可以新增自訂標頭。

新增自訂標頭。

如要在同一處編輯所有覆寫內容，請前往「來源」> 編輯 .headers 檔案覆寫。您也可以按一下「新增覆寫規則」，使用萬用字元 (*) 覆寫多項要求。

編輯所有覆寫值。

Chromium 問題：1288023。

改善 Nuxt、Vite 和 Rollup 偵錯功能

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

  • 在主控台的追蹤記錄中，找到「顯示另外 N 個畫格」連結下方的連結。
  • 來源：來源 >「Call Stack」(呼叫堆疊) 位於 核取方塊。 下方的「Show」>「Skiped frames」(顯示忽略清單中的影格)。

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

為帶來這些改善，開發人員工具、Nuxt、Vite 和 Rollup 團隊共同採用 x_google_ignoreList 來源對應擴充功能：

開發人員工具團隊想向 Nuxt、Vite 和 Rollup 團隊表達感謝，我們非常感激您付出的心血和努力，這些成果是推動此實作成功的關鍵。再次感謝你的貢獻！

改進元素中的 CSS >風格

CSS 屬性和值無效

為協助您更快診斷 CSS 問題，「Styles」窗格現在不會顯示下列項目：

  • CSS 資源無效時，整個 CSS 宣告 (屬性「和」值)。
  • 只有 CSS 屬性有效但值無效的值。

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

開發人員工具團隊想表達你對 Yisi(-S 的信息) 的心聲，表示這次改善。

動畫簡短屬性中的主要畫面格連結

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

動畫簡短屬性中的主要畫面格連結。

Chromium 問題：1420656。

新版控制台設定：輸入時自動完成

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

根據預設，如要接受自動完成建議，可以按下 Tab 或 Arrow right。如要同時使用 Enter 的自動完成功能，請啟用 。「設定」>管理中心 >核取方塊。 按下 Enter 鍵後接受自動完成建議。

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

此外，其他設定的文字現在更容易使用：核取方塊。 將程式碼評估視為使用者動作。

Chromium 問題：1276960。

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

「指令選單」中的快速開啟對話方塊現在會呈現忽略的第三方檔案，以強調你所建立的檔案。

更改前後的快速開啟對話方塊中會顯示忽略的指令碼。

Chromium 問題：1424345。

JavaScript 分析器淘汰：第二階段

自 Chrome 58 起，開發人員工具團隊計劃最終淘汰 JavaScript Profiler，讓 Node.js 和 Deno 開發人員使用「Performance」面板來分析 JavaScript CPU 效能。

自四階段的 JavaScript 分析器淘汰，開發人員工具 113 版將開始第二階段。在這個階段，您還是可以開啟面板，但無法再使用相關 UI。

如要剖析 CPU 效能，請按一下「Go to Performance Panel」。

JavaScript 分析器淘汰。

Chromium 問題：1354548。

其他精選內容

這個版本包含以下重大修正項目：

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。