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

Jecelyn Yeen

使用「樣式」窗格偵錯 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) 的色票。我們也新增了色域邊界線，以便區分 sRGB 和 display-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 問題：1073895、1395782、1408777、1395782、1392717、1382409、1392054

強化的中斷點使用者體驗

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

以下是幾項重點： - 兩個暫停例外狀況選項都已移至「Breakpoints」窗格，並加上文字標籤，方便您自行瞭解。 暫停例外狀況選項。

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

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

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

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

Chromium 問題：1407586、1402891、1402893

可自訂的錄影器快速鍵

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

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

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

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

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

Chromium 問題：1339771

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

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

Chromium 問題：1385374、1385678

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

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

Chromium 問題：1407166

其他精選內容

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

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

下載預覽管道

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

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

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

開發人員工具的新功能

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