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

Sofia Emelianova
Sofia Emelianova
GitHub

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

開發人員工具已進行多項改善，協助您更快速地找出並偵錯缺少樣式表單的問題：

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

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

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

主控台會提供有問題陳述式的確切行號連結。

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

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

「Issues」面板，內含來源和要求的連結。

Chromium 問題：1440626、1442198、1453611。

在「元素」>「樣式」>「Easing Editor」中支援線性時間

在「元素」 >「樣式」中，您可以使用 Ease 編輯器。 Easing 編輯器，只需點按即可調整 transition-timing-function 和 animation-timing-function 值。在這個版本中，Ease 編輯器。 Easing Editor 可支援線性時間函式。

如要設定線性時間，請按一下線性挑選器按鈕。如要新增控制點，請按一下線條上的任一處。如要移除控制點，請按兩下該點。您也可以選擇下列其中一個預設值：linear、elastic、bounce 或 emphasized。觀看影片，瞭解線性調整的實際運作方式。

Chromium 問題：1421241。

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

「Application」 >「Storage」專區支援儲存空間值區。儲存體是彼此獨立的，因此您可以為資料切片指定淘汰優先順序，確保最有價值的資料不會遭到刪除。每個儲存空間容器都可以儲存與已建立的儲存空間 API 相關聯的資料，例如 IndexedDB 和 CacheStorage。

請查看這個 fiddle，測試這項功能。開啟 DevTools，依序前往「Application」 >「Storage」 >「Indexed DB」，然後執行程式碼。開發人員工具現在會顯示值區及其內容。選取資料集即可查看相關中繼資料。

查看值區的中繼資料。

統一中繼資料檢視畫面現在也適用於本機、工作階段和快取儲存空間區段。

新的統一中繼資料檢視畫面。

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。

其他精選內容

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

  • 即使您已與時間軸互動，Network 面板仍會繼續記錄網路活動 (1422552)。
  • 涵蓋率面板現在可辨識是否有預先顯示啟用或返回/前進快取導覽，並提示您重新載入 (1393057)。
  • 您現在可以使用鍵盤前往「Sources」 >「Breakpoints」 窗格：向上鍵和向下鍵可用於移動，空白鍵可用於選取 (1446150)。
  • 修正在「Network」面板中上傳及篩選 HAR 檔案的問題 (1450622)。
  • Performance 面板中的火焰圖現在會在追蹤記錄之間留出小間距，以便更佳顯示 (1452150)。
  • 修正內嵌在來源對應中的檔案自動對應問題 (1446383)。

下載預覽管道

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

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

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

開發人員工具的新功能

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