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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

覆寫網路回應標頭

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

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

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

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

您也可以新增自訂標頭。

新增自訂標頭。

如要編輯單一位置的所有覆寫設定，請依序點選「來源」 >「覆寫」中的 .headers 檔案。您也可以按一下「新增覆寫規則」，使用萬用字元 (*) 覆寫多個要求。

編輯所有覆寫值。

Chromium 問題：1288023。

改善 Nuxt、Vite 和 Rollup 偵錯功能

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

  • 在「Console」(控制台) 追蹤記錄中，前往「Show N more frames」(顯示 N 個影格) 連結下方。
  • 在「Sources」(來源) >「Call Stack」(呼叫堆疊) 底下，找出 核取方塊。 底下的「Show ignore-list frames」(顯示忽略的影格)。

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

為提供這些改善，開發人員工具、Nutxt、Vite 和 Rollup 團隊攜手採用 x_google_ignoreList 來源對應擴充功能：

為了達成這個目標，開發人員工具團隊想向 Nuxt、Vite 和 Rollup 團隊表達謝意。感謝你的配合與合作，這對這項措施的成功有重大影響。再次感謝你的貢獻！

改善「元素」>「樣式」的 CSS

CSS 屬性和值無效

為協助您更快診斷 CSS 問題，「Styles」(樣式) 窗格現在會畫出叉號：

  • CSS 資源無效時的完整 CSS 宣告 (屬性「和」值)。
  • 僅限 CSS 屬性有效但值無效時的值。

屬性名稱和屬性值無效。

為了達成這項改善措施，開發人員工具團隊想向 Yisi(Sever) 表達感謝。

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

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

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

Chromium 問題：1420656。

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

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

根據預設，如要接受自動完成建議，請按下 Tab 或 Arrow right。如要一併使用 Enter 的自動完成建議，請啟用 [設定]。「設定」>「Console」，然後啟用 核取方塊。「在 Enter 時接受自動完成建議」。

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

此外，「另一項設定」的文字更容易使用：核取方塊。「將程式碼評估視為使用者動作」。

Chromium 問題：1276960。

指令選單會著重顯示已編寫的檔案

「指令選單」中的快速開啟對話方塊現在會顯示為灰色「已忽略」的第三方檔案，以便強調您所撰寫的檔案。

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

Chromium 問題：1424345。

JavaScript 分析器淘汰：第二階段

開發人員工具團隊最早預計在 Chrome 58 版時淘汰 JavaScript 分析器，同時讓 Node.js 和 Deno 開發人員使用「Performance」面板來剖析 JavaScript CPU 效能。

開發人員工具 113 版將於四階段 JavaScript 分析器淘汰的階段 2 開始。在這個階段，您還是可以開啟面板，但其 UI 已無法使用。

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

JavaScript 分析器淘汰。

Chromium 問題：1354548。

其他精選內容

這個版本的幾個重點修正如下：

  • 修正會導致「來源」面板中進行美化列印，無法正確處理包含 Unicode 字元的變數名稱的錯誤 (1425055)。
  • 「問題」分頁加入了新訊息，用於說明與非標準 HTML 值相關的自動填入問題 (1399414)。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59