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

Sofia Emelianova
Sofia Emelianova

覆寫網路回應標頭

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

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

如要覆寫標頭,請依序前往「網路」>「標頭」>「回應標頭」,將滑鼠遊標懸停在標頭值上,然後按一下 。 並進行編輯。

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

也可以新增自訂標頭。

新增自訂標頭。

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

編輯所有覆寫值。

Chromium 問題:1288023

改善 Nuxt、Vite 和 Rollup 偵錯功能

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

  • 主控台的追蹤記錄中,找到「顯示另外 N 個畫格」連結下方的連結。
  • 「Sources」(來源) >「Call Stack」(呼叫堆疊) 的 核取方塊。 下方,找到 核取方塊。「ShowHideed 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 時套用自動完成建議。

根據預設,如要接受自動完成建議,可以按下 TabArrow 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 CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消

Chrome 81 版

Google 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