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

Sofia Emelianova
Sofia Emelianova
GitHub

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

開發人員工具提供多項改善功能，可協助您更快找出缺少樣式表並進行偵錯的問題：

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

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

  • 除了失敗要求的連結外，控制台現在也提供一行連結，讓您一一參照無法載入的樣式表。

控制台會提供內含問題陳述的確切程式碼連結。

  • 「網路」面板會在「發起者」欄中持續填入連結，提供指向無法載入的樣式表的確切連結。

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

「問題」面板提供來源和要求的連結。

Chromium 問題：1440626、1442198、1453611。

元素中的線性時間支援 >樣式 >加/減速編輯器

「元素」中的 加/減速編輯器。「加/減速編輯器」>在樣式中，只要按一下滑鼠即可調整 transition-timing-function 和 animation-timing-function 值。在這個版本中，加/減速編輯器。 Easing 編輯器支援線性時間函式。

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

Chromium 問題：1421241。

Storage 值區支援及中繼資料檢視畫面

應用程式 >儲存空間專區支援儲存空間值區。儲存空間值區彼此獨立，因此您可以為資料切片指定撤銷優先順序，確保最有價值的資料不會遭到刪除。每個儲存空間值區都可以儲存與既有儲存 API 相關聯的資料，例如 IndexedDB 和 CacheStorage。

請參閱這篇文章，瞭解如何測試這項功能。開啟開發人員工具，前往「Application」>儲存空間 >已建立索引的資料庫，然後執行程式碼。開發人員工具現在會顯示值區及其內容。選取值區即可查看中繼資料。

查看值區的中繼資料。

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

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

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。

其他精選內容

這個版本包含多項重要修正和改善項目：

下載預覽頻道

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

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

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

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

開發人員工具新功能

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