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

你好!以下是 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 WorkerlocalStoragesessionStorageIndexedDBWeb SQLCookie快取、 與 應用程式快取

「清除網站資料」指令。

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

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

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

應用程式帶有「Clear Storage」(清除儲存空間) 字樣的分頁已選取。

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

相關的 Chromium 問題:#942503

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

先前「應用程式」>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 個中斷點先前「Breakpoints」窗格並未讓您管理 分別介紹這 3 個中斷點自 Chrome 75 起,每個內嵌中斷點都會在 中斷點窗格。

舊行為。「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. 詳細工具提示,顯示顏色、字型、邊界和對比。

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

最簡單的工具提示。

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

相關的 Chromium 問題:#948417

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

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

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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