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

Sofia Emelianova
Sofia Emelianova
GitHub

改善缺少樣式表的偵錯功能

DevTools 進行許多改善，可協助您更快找出缺少樣式表的問題並進行偵錯：

  • 「來源」 >「網頁」樹狀結構現在只會顯示成功部署並載入的樣式表，以盡可能減少混淆。
  • 「Sources」(來源) >「Editor」(編輯器) 現在會加上底線，並在失敗的 @import、url() 和 href 陳述式旁邊顯示內嵌錯誤工具提示。

在「來源」面板中含有工具提示的底線陳述式。

  • 除了指向失敗要求的連結外，控制台現在還提供參照無法載入的樣式表的確切行連結。

控制台會提供連結，指向有問題陳述的確切行。

  • 「網路」面板會持續在 「Initiator」欄中填入相關連結，指向參照無法載入的樣式表的確切行。

  • 「問題」面板會列出所有樣式表載入問題，包括無效網址、要求失敗和錯置的 @import 陳述式。

「問題」面板含有來源和要求的連結。

Chromium 問題：1440626、1442198、1453611。

「元素」>「樣式」>「加/減速編輯器」支援線性時間碼

依序前往「Elements」(元素) >「Styles」(樣式)，即可設定 加/減速編輯器。 Easing Editor，只要按一下滑鼠即可調整 transition-timing-function 和 animation-timing-function 值。在這個版本中，加/減速編輯器。 Easing Editor 可取得線性時間函式支援。

如要設定線性時間，請按一下線性挑選器按鈕。如要新增控制點，請在線條上任一處按一下。如要移除控制點，請按兩下控制點。你也可以選擇以下任一種預設項目：linear、elastic、bounce 或 emphasized。觀看影片，瞭解線性調整功能的實際運作情形。

Chromium 問題：1421241。

儲存空間值區支援和中繼資料檢視

「應用程式」 >「儲存空間」區段可取得儲存空間值區支援。儲存空間值區彼此獨立，因此您可以指定清除特定資料片段的優先順序，確保最重要的資料不會遭到刪除。每個儲存空間值區都能儲存與既有儲存空間 API (例如 IndexedDB 和 CacheStorage) 相關聯的資料。

請參閱此連結以測試功能。開啟開發人員工具，前往 [應用程式] > [儲存空間] > [索引資料庫]，然後執行程式碼。開發人員工具現在會顯示值區及其內容。選取值區即可查看其中繼資料。

查看值區的中繼資料。

針對本機、工作階段和快取儲存空間部分，統一的中繼資料檢視功能也開放使用。

新的整合式中繼資料檢視畫面。

Chromium 問題：1448011、1406017。

Lighthouse 10.3.0 版本

Lighthouse 面板現在會執行 Lighthouse 10.3.0。最值得注意的是，這個版本新增了四種稽核功能，以擷取資料表標頭、字幕、輸入按鈕名稱及語言不一致的各種無障礙功能問題。例如：

通過的資料表標頭檢查。

另請參閱完整異動清單。如要瞭解使用開發人員工具中 Lighthouse 面板的基本概念，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

無障礙設計：鍵盤指令功能提升螢幕閱讀效率

開發人員工具現在支援更多捷徑，並修正螢幕閱讀器的問題：

  • 您現在可以使用鍵盤快速鍵開啟內容選單，例如在 Windows 和許多 Linux 發行版本中，按下 Shift + F10 鍵。如需 MacOS 快速鍵，請參閱「替代指標動作」。
  • 螢幕閱讀器應用程式：
    • 您不必重複宣布核取方塊標籤兩次。
    • 按下「讀取欄標題」捷徑時，系統會朗讀可排序資料欄的欄標題名稱。

開發人員工具團隊也向 Yanling Wang 和 Elorm Coch 表達感謝，

Chromium 問題：1446482、1414952。

其他精選內容

這個版本包含幾項值得注意的修正和改善項目：

  • 「網路」面板會繼續記錄網路活動，直到您與時間軸互動為止 (1422552)。
  • 「涵蓋率」面板現在可辨識是否有預先算繪啟用或往返快取瀏覽，並提示您重新載入 (1393057)。
  • 您現在可以使用鍵盤前往「Sources」(來源) >「Breakpoints」窗格：使用鍵盤向上鍵和「向下鍵」可移動，點按「空格鍵」則可選取圖示 (1446150)。
  • 修正在「網路」面板中上傳及篩選 HAR 檔案的問題 (1450622)。
  • 「Performance」面板的 Flamechart 功能現在會在追蹤記錄間縮小小範圍，以提升算繪結果 (1452150)。
  • 修正嵌入來源地圖中檔案的自動對應問題 (1446383)。

下載預覽管道

考慮使用 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