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

Kayce Basques
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) 開啟「Command」選單，然後執行「清除網站資料」指令，清除與頁面相關的所有資料，包括：Service Worker、localStorage、sessionStorage、IndexedDB、WebCache、WebCache

「清除網站資料」指令。

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

「應用程式」 >「清除儲存空間」中的網站資料清除功能已有一段時間，Chrome 75 版的新功能可透過指令選單執行指令。

如果您不希望刪除「所有」網站資料，可以控制要從「Application」(應用程式) >「Clear Storage」(清除儲存空間) 中刪除哪些資料。

選取「清除儲存空間」的「應用程式」標籤

圖 4 「Application」(應用程式) >「Clear Storage」(清除儲存空間)。

相關的 Chromium 問題：#942503

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

在先前「Application」 >「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 起，每個內嵌中斷點都會在「Breakpoints」窗格中取得專屬的項目。

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

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

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

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

相關的 Chromium 問題：#927961

IndexedDB 和 Cache 的資源數量

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

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

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

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

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

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

詳細工具提示。

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

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

最簡單的工具提示。

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

相關的 Chromium 問題：#948417

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

無障礙功能測試顯示「編輯器」有分頁標記。使用者將鍵盤分頁進入「編輯器」後，由於使用了 Tab 鍵進行縮排，因此無法關閉分頁。如要覆寫預設行為，並使用 Tab 鍵來移動焦點，請啟用「設定」 >「偏好設定」 >「來源」 >「啟用分頁移動焦點」。

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59