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

Jecelyn Yeen

使用「Styles」窗格對 HD 高畫質色彩進行偵錯

網頁版即將推出全新 CSS 顏色類型和空間！同樣令人開心的是，開發人員工具推出了新工具，可協助開發人員建立、轉換及偵錯 HD 高畫質色彩。

「Styles」窗格現在支援 12 個新的色域和 7 個新的色域，如 CSS 色彩等級 4 規格中所述。請參閱高畫質 CSS 顏色指南，全面瞭解網路上可用的顏色選項。

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

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

顏色挑選器支援所有包含更多功能的全新色彩空間。例如，按一下 color(display-p3 1 0 1) 的色樣。我們也新增了轉軸邊界線，用於區分 sRGB 和 display-p3 的群系，讓您更清楚瞭解所選顏色的色域。 不透明界線線。

開發人員工具支援轉換顏色格式。使用「變更色彩格式」圖示，即可存取轉換彈出式視窗，或點選 Shift 鍵 +「Styles」窗格中的色票， 轉換色彩格式之間的顏色。

轉換時，請務必瞭解轉換是否配合空間大小而裁剪。開發人員工具會在轉換後的顏色旁邊顯示警告圖示，以提醒你這個剪輯。 色彩裁剪警告。

此外，你可以使用新的快速鍵挑選畫面上的顏色。按下「C」鍵啟動滴管，然後按 Escape 停用它。滴管工具只會對 sRGB 色域中的色彩進行取樣。舉例來說，如果您嘗試取樣 color(display-p3 1 0 1) 的顏色，該顏色超出 sRGB 色域，滴管工具會將顏色裁剪為 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

可自訂的錄音工具快速鍵

使用鍵盤快速鍵更快錄製及重播使用者流程。

錄音工具推出幾個便利的鍵盤快速鍵，可更快速錄製及重播使用者流程。

不記得快速鍵嗎？沒問題，按一下「?」按鈕，即可隨時查看所有快速鍵。 「錄音工具」快速鍵。

您還可以透過「設定」選單自訂這些快速鍵。 自訂「錄音工具」快速鍵。

如果您使用的是其他面板，且想要開始記錄使用者流程，請在開發人員工具中點選 Command 選單中的「Create a new record」指令，即可開始記錄。 建立新的錄製指令。

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)
  • 為提升偵錯效率，開發人員工具現已支援透過私人類別成員評估運算式。(1381806)。 使用私人類別成員評估運算式。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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