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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

「來源」面板中附有工具提示的加底線陳述內容。

  • 除了失敗要求的連結外，「控制台」現在還提供連結，可直接前往參照樣式表 (載入失敗) 的確切行數。

主控台會提供連結，直接連到有問題陳述的確切行數。

  • 「網路」面板會持續在「發起者」欄中填入連結，指向參照樣式表 (載入失敗) 的確切行。

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

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

Chromium 問題：1440626、1442198、1453611。

「元素」>「樣式」>「緩和效果編輯器」支援線性時間碼

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

如要設定線性時間碼，請按一下線性挑選器按鈕。如要新增控制點，請按一下線條上的任一處。如要移除控制點，請按兩下。你也可以選擇預設值：linear、elastic、bounce 或 emphasized。觀看影片，瞭解如何進行線性調整。

Chromium 問題：1421241。

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

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

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

查看 bucket 的中繼資料。

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

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

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)。
  • 現在可以使用鍵盤在「來源」 >「中斷點」窗格中瀏覽：使用向上箭頭和向下箭頭移動，並使用空格鍵選取 (1446150)。
  • 修正「網路」面板中的 HAR 檔案上傳和篩選功能 (1450622)。
  • 「效能」面板中的火焰圖現在會在追蹤記錄之間加入小間隙，以便更清楚地呈現追蹤記錄 (1452150)。
  • 修正來源對應中內嵌檔案的自動對應問題 (1446383)。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。