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

Kayce Basques
Kayce Basques
X GitHub

你好！以下是 Chrome 75 版 Chrome 開發人員工具的新功能。

這個頁面的影片版本

自動完成 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」指令，清除與網頁相關的所有資料，包括：服務工作人員、localStorage、sessionStorage、IndexedDB、Web SQL、Cookie、快取和應用程式快取。

「清除網站資料」指令。

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

清除網站資料的功能已在「應用程式」>「清除儲存空間」中提供一段時間。Chrome 75 的新功能是可從指令選單執行指令。

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

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

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

相關的 Chromium 問題：#942503

查看所有 IndexedDB 資料庫

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

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

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

新行為。您會看到示範資料庫。

圖 6. 新行為。您會看到示範資料庫。

相關的 Chromium 問題：#943770

將滑鼠懸停在資源上，即可查看未壓縮的大小

假設您正在檢查網路活動。您的網站使用文字壓縮功能，縮減資源的傳輸大小。您想瞭解網頁資源在瀏覽器解壓縮後的大小。先前只有在使用大型要求資料列時，才能取得這項資訊。現在只要將游標懸停在「大小」欄上，即可查看這項資訊。

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

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

相關的 Chromium 問題：#805429

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

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

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

在一段時間內，開發人員工具可讓您指定在斷點暫停的確切時間，例如在行首、呼叫 document.querySelector('#dante') 之前，或呼叫 addEventListener('click', logWarning) 之前。如果啟用全部 3 個，基本上就是建立 3 個中斷點。先前「中斷點」窗格無法個別管理這 3 個中斷點。從 Chrome 75 開始，每個內嵌中斷點都會在「中斷點」窗格中顯示專屬項目。

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

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

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

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

相關的 Chromium 問題：#927961

IndexedDB 和快取資源計數

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

IndexedDB 資料庫中的項目總數。

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

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

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

Chrome 73 版在「檢查」模式中導入了詳細工具提示。

詳細工具提示。

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

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

最簡單的工具提示。

圖 12. 只顯示寬度和高度的最小工具提示。

相關的 Chromium 問題：#948417

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

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

我們最近投入許多心力，讓開發人員工具 UI 本身更易於透過鍵盤操作。 如要瞭解詳情，請參閱 Rob 的「使用輔助技術瀏覽 Chrome 開發人員工具」。

下載預覽版頻道

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

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

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

開發人員工具新功能

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