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 鍵 (Mac) 或 Command + Shift + P 鍵 (Mac) 開啟指令選單，然後執行「Clear Site Data」指令，清除與頁面相關的所有資料，包括：Service Worker、localStorage、sessionStorage、IndexedDB、IndexedDB、IndexedDB、IndexedDB。

「Clear Site Data」(清除網站資料) 指令。

圖 3：[清除網站資料] 指令。

在「應用程式」 >「清除儲存空間」中，您可以查看一段時間來清除網站資料。Chrome 75 版的新功能可從「指令」選單執行指令。

如果不想刪除「所有」網站資料，您可以前往「Application」>「Clear Storage」，指定要刪除哪些資料。

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

圖 4 [Application] > [Clear Storage]。

相關的 Chromium 問題：#942503

查看所有 IndexedDB 資料庫

先前，「Application」 >「IndexedDB」只能讓您檢查主要來源的索引資料庫資料庫。舉例來說，如果您的網頁上有 <iframe>，且 <iframe> 使用索引資料庫，您就無法查看其資料庫。從 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 和快取資源數量

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

IndexedDB 資料庫中的項目總數。

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

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

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

Chrome 73 推出了在檢查模式期間的詳細工具提示，

詳細的工具提示。

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

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

最小的工具提示。

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

相關的 Chromium 問題：#948417

來源面板編輯器中的分頁縮排設定

無障礙功能測試顯示，編輯器中會出現分頁陷阱。鍵盤使用者分頁進入「編輯器」後，就無法按 Tab 鍵，因為 Tab 鍵是用於縮排。如要覆寫預設行為並使用 Tab 鍵移動焦點，請依序點選「設定」 >「偏好設定」 >「來源」 >「啟用分頁移動焦點」。

最近我們花費許多心力，讓開發人員工具 UI 本身更易於瀏覽。詳情請參閱 Rob 的「透過輔助技術瀏覽 Chrome 開發人員工具」。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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