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

使用「樣式」窗格偵錯 HD 顏色

新的 CSS 顏色類型和空間即將在網路上推出!同樣令人振奮的是,DevTools 推出了新的工具,可協助開發人員建立、轉換及偵錯高解析度色彩。

Styles 窗格現已支援 12 個新的色彩空間和 7 個新的色域,如 CSS Color Level 4 規格所述。請參閱 高畫質 CSS 顏色指南,全面瞭解網路上可用的顏色選項。

以下是使用 color()lch()oklab()color-mix() 的 CSS 顏色定義範例。CSS 顏色定義範例。

使用 color-mix() 函式時,您可以在「Computed」窗格中查看最終顏色輸出結果。 「Computed」窗格中的顏色混合結果。

色彩挑選器支援所有新色彩空間,並提供更多功能。例如,按一下 color(display-p3 1 0 1) 的色票。我們也新增了色域邊界線,以便區分 sRGBdisplay-p3 色域,讓您更清楚瞭解所選顏色的色域。 色域邊界線。

DevTools 支援在色彩格式之間轉換顏色。使用「變更顏色格式」圖示,即可開啟轉換彈出式視窗,或者只要使用 Shift + 點選「樣式」窗格中的色塊即可。 在不同色彩格式之間轉換顏色。

轉換時,請務必瞭解轉換是否已裁剪,以便符合空間。開發人員工具會在轉換的顏色旁邊放置警告圖示,提醒您發生這種裁剪情形。 色彩裁剪警告。

此外,您也可以使用新的捷徑從螢幕上挑選顏色。按下「c」啟用滴管,按下 Escape 則會停用滴管。滴管工具只會取樣 sRGB 色域中的顏色。舉例來說,如果您嘗試取樣 sRGB 色域以外的顏色 color(display-p3 1 0 1),滴管工具會將該顏色裁剪為 sRGB 色域中最接近的顏色,也就是洋紅色 color(display-p3 0.92 0.2 0.97)

啟用取色管。

最後,我們已淘汰「色彩格式」設定,以便為新的 HD 色彩格式騰出空間。 淘汰顏色格式設定。

Chromium 問題:1073895139578214087771395782139271713824091392054

強化的中斷點使用者體驗

重新設計的「Breakpoints」窗格可讓您快速存取常用的功能,尤其是停用、編輯和移除中斷點。

以下是幾項重點: - 兩個暫停例外狀況選項都已移至「Breakpoints」窗格,並加上文字標籤,讓您更容易瞭解。 暫停例外狀況選項。

  • 中斷點會依檔案分組,並依照行號或欄號排序,且可摺疊。 依檔案分組中斷點。

  • 當滑鼠游標懸停在中斷點或檔案上時,系統會顯示新的選項,可用來停用、移除及編輯中斷點。 新的中斷點停用選項。

  • 按一下「編輯中斷點」按鈕,開啟中斷點編輯器。您可以在此輸入中斷點條件,或切換至記錄點。 中斷點編輯對話方塊。

請參閱 JavaScript 偵錯參考資料,瞭解如何使用開發人員工具進行偵錯。

Chromium 問題:140758614028911402893

可自訂的錄影器快速鍵

使用鍵盤快速鍵,更快速地記錄及重播使用者流程。

錄製器提供幾個方便的鍵盤快速鍵,可加快錄製及重播使用者流程的速度。

不記得捷徑嗎?沒問題,只要點選 ? 按鈕,隨時都能查看所有捷徑。 錄音器捷徑。

您甚至可以透過「設定」選單自訂這些捷徑。 自訂錄音器捷徑。

如果您在其他面板中工作,並且想要開始錄製使用者流程,請在開發人員工具的「指令選單」中使用「建立新的錄製內容」指令。 建立新的錄音指令。

Chromium 問題:1339771

改善 Angular 的語法醒目顯示功能

開發人員工具強化了 Angular HTML 範本的語法醒目顯示功能,讓您更輕鬆地閱讀程式碼並辨識其結構。 Angular HTML 範本的語法醒目顯示。

Chromium 問題:13853741385678

在「應用程式」面板中重新整理快取

「Cache Storage」窗格現已移至「Application」面板的「Storage」部分,而「Back/forward cache」窗格則已移至「Background Services」部分。 應用程式面板中的快取。

Chromium 問題:1407166

其他精選內容

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

  • 開發人員工具已更新,在載入來源對應時會遵循「停用快取」設定。(1407084)。
  • 「Elements」面板現在會立即自動將焦點放在搜尋結果中第一個符合條件的元素。(1381853)
  • 修正多項錯誤,以改善來源對應圖和中斷點的可靠性。(50827014033621403432139629813953371405134)。
  • 為進一步簡化偵錯作業,DevTools 現在支援使用私人類別成員評估運算式。(1381806) 使用私人類別成員評估運算式。

下載預覽管道

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

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

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

開發人員工具的新功能

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