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

Kayce Basques

你好！以下是 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) 開啟指令選單，然後執行 清除 Site Data 指令，清除網頁的所有相關資料，包括：Service Worker、 localStorage、sessionStorage、IndexedDB、Web SQL、Cookie、快取、 與 應用程式快取。

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

如要清除網站資料，請前往 [應用程式] >清除儲存空間一段時間。而 Chrome 75 的功能才能透過命令選單執行這項指令。

如果您不要刪除「所有」網站資料，可以控管要從哪些服務刪除資料 應用程式 >清除儲存空間。

圖 4. 應用程式 >清除儲存空間。

相關的 Chromium 問題：#942503

查看所有已建立索引的資料庫

先前「應用程式」>IndexedDB 只能用來檢查 主要來源。舉例來說，假設您的網頁上有<iframe>，而<iframe> IndexedDB，您就無法查看資料庫。自 Chrome 75 版起，開發人員工具會顯示 IndexedDB 所有來源的資料庫

圖 5：舊行為。這個網頁嵌入了使用 IndexedDB 的示範，但沒有資料庫 都處於可見狀態。

圖 6. 新行為。示範的資料庫會顯示。

相關的 Chromium 問題：#943770

懸停時顯示資源的未壓縮大小

假設您要檢查網路活動。您的網站使用文字壓縮， 縮減資源的移轉作業大小您想查看網頁中資源 瀏覽器會將這些檔案解壓縮。以往，只有在使用大型要求時，才能取得這項資訊 資料列。現在，將滑鼠遊標懸停在「大小」欄上，即可存取這項資訊。

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

相關的 Chromium 問題：#805429

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

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

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

開發人員工具目前已啟用一段時間，可讓您指定在中斷點暫停播放的確切時間 如下所示：這一行的開頭、呼叫 document.querySelector('#dante') 之前。 呼叫 addEventListener('click', logWarning) 之前如果選擇全部啟用這 3 個選項 可建立 3 個中斷點先前「Breakpoints」窗格並未讓您管理 分別介紹這 3 個中斷點自 Chrome 75 起，每個內嵌中斷點都會在 中斷點窗格。

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

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

相關的 Chromium 問題：#927961

IndexedDB 和 Cache 的資源數量

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

圖 10. 已建立索引資料庫中的項目總數。

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

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

Chrome 73 推出在檢查模式下顯示詳細工具提示的功能。

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

如要停用詳細工具提示，請依序前往「設定」>偏好設定 > Elements >顯示詳細檢查結果工具提示。

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

相關的 Chromium 問題：#948417

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

無障礙功能測試顯示「編輯器」有分頁標記。先用鍵盤操作 使用者分頁連結至「編輯器」，無法自行切換分頁，因為 Tab 鍵 用於縮排如要覆寫預設行為，並使用 Tab 移動焦點，請啟用 「設定」>偏好設定 >來源 >啟用分頁移動焦點。

最近，我們進行了大量工作，讓開發人員工具的 UI 更能讓鍵盤更易於瀏覽。 詳情請參閱 Rob 的「使用輔助技術瀏覽 Chrome 開發人員工具」。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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