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

Kayce Basques

你好！以下是 Chrome 75 版 Chrome DevTools 的新功能。

這個頁面的影片版本

自動完成 CSS 函式時，提供有意義的預設值

有些 CSS 屬性 (例如 filter) 會使用函式做為值。舉例來說，filter: blur(1px) 會為節點新增 1 像素模糊效果。當您自動完成 filter 等屬性時，開發人員工具現在會使用有意義的值填入該屬性，讓您預覽該值會對節點造成哪些變更。

舊的自動完成行為。

圖 1. 舊的自動完成行為。開發人員工具會自動完成 filter: blur，但可視區域中並未顯示任何變更。

新的自動完成功能行為。

圖 2. 新的自動完成功能行為。開發人員工具會自動完成 filter: blur(1px)，變更會顯示在可視區域中。

相關的 Chromium 問題：#931145

透過指令選單清除網站資料

按下 Control + Shift + P 或 Command + Shift + P (Mac) 即可開啟指令選單，然後執行「Clear Site Data」指令，清除與網頁相關的所有資料，包括：Service workers、localStorage、sessionStorage、IndexedDB、Web SQL、Cookie、Cache 和 Application Cache。

「清除網站資料」指令。

圖 3. 「清除網站資料」指令。

清除網站資料的功能已開放一段時間，您可以依序前往「應用程式」 >「清除儲存空間」來使用這項功能。Chrome 75 的新功能可透過指令選單執行指令。

如果您不想刪除所有網站資料，可以前往「應用程式」>「清除儲存空間」，控制要刪除的資料。

選取「清除儲存空間」的「應用程式」分頁。

圖 4. 依序前往「應用程式」 >「清除儲存空間」。

相關的 Chromium 問題：#942503

查看所有 IndexedDB 資料庫

先前，您只能透過「Application」 >「IndexedDB」檢查主要來源的 IndexedDB 資料庫。舉例來說，如果網頁上有 <iframe>，而該 <iframe> 使用 IndexedDB，您就無法查看相關資料庫。自 Chrome 75 起，開發人員工具會顯示所有來源的 IndexedDB 資料庫。

舊版行為。網頁嵌入了使用 IndexedDB 的示範，但沒有任何資料庫可供查看。

圖 5：舊版行為。網頁嵌入了使用 IndexedDB 的示範，但沒有任何資料庫可供查看。

新行為。您可以看到示範的資料庫。

圖 6. 新行為。您可以看到示範的資料庫。

相關的 Chromium 問題：#943770

懸停時查看資源的未壓縮大小

假設您要檢查網路活動。您的網站使用文字壓縮功能，縮減資源的傳輸大小。您想查看瀏覽器解壓縮後的網頁資源大小。先前這項資訊僅適用於使用大型要求列的情況。只要將滑鼠游標懸停在「Size」欄上，即可存取這項資訊。

將滑鼠游標懸停在「Size」欄上，即可查看資源的未壓縮大小。

圖 7. 將滑鼠游標懸停在「Size」欄上，即可查看資源的未壓縮大小。

相關的 Chromium 問題：#805429

中斷點窗格中的內嵌中斷點

假設您在下列程式碼行中新增程式碼行中斷點：

document.querySelector('#dante').addEventListener('click', logWarning);

一段時間以來，DevTools 已讓您能夠指定在哪個時間點應暫停在暫停點，例如：在行首、在 document.querySelector('#dante') 呼叫之前，或在 addEventListener('click', logWarning) 呼叫之前。如果啟用所有 3 個，您實際上會建立 3 個中斷點。先前「中斷點」窗格無法讓您個別管理這 3 個中斷點。自 Chrome 75 起，每個內嵌中斷點都會在「Breakpoints」窗格中取得專屬項目。

舊版行為。「Breakpoints」窗格中只有一個項目。

圖 8. 舊版行為。「Breakpoints」窗格中只有 1 個項目。

新行為。「Breakpoints」窗格中有 3 個項目。

圖 9. 新行為。「Breakpoints」窗格中有 3 個項目。

相關的 Chromium 問題：#927961

IndexedDB 和快取資源數量

IndexedDB 和 快取窗格現在會顯示資料庫或快取中的資源總數。

IndexedDB 資料庫中的總項目數。

圖 10. IndexedDB 資料庫中的總項目數。

相關的 Chromium 問題：#941197、#930773、#930865

停用詳細檢查工具提示的設定

Chrome 73 版推出了檢查模式下的詳細工具提示。

詳細的工具提示。

圖 11. 顯示顏色、字型、邊距和對比度的詳細工具提示。

您現在可以依序前往「設定」 >「偏好設定」 >「元素」 >「顯示詳細檢查工具提示」，停用這些詳細工具提示。

簡易的工具提示。

圖 12. 僅顯示寬度和高度的簡易工具提示。

相關的 Chromium 問題：#948417

在「來源」面板編輯器中切換縮排設定

無障礙測試顯示「編輯器」中存在分頁陷阱。鍵盤使用者在使用 編輯器的 Tab 鍵縮排後，無法再使用 Tab 鍵離開編輯器。如要覆寫預設行為，並使用「分頁」移動焦點，請依序前往「設定」 >「偏好設定」 >「來源」 >「啟用分頁移動焦點」。

我們最近做了許多工作，讓 DevTools UI 更適合使用鍵盤操作。請參閱 Rob 的「使用輔助技術瀏覽 Chrome 開發人員工具」一文，進一步瞭解相關資訊。

下載預覽管道

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

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

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

開發人員工具的新功能

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