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

Chrome 67 版開發人員工具的新功能和重大變更包括:

版本資訊的影片版本

開啟「Network」面板,然後按下 Command + F 鍵 (Mac) 或 Control + F 鍵 (Windows、Linux、ChromeOS),即可開啟新的「Network Search」窗格。開發人員工具會針對您提供的查詢,搜尋所有網路要求的標頭和內容。

使用新的「Network Search」窗格搜尋「cache-control」文字。

圖 1. 使用新的「Network Search」窗格搜尋文字「cache-control

按一下「比對大小寫」大小寫相符,讓查詢區分大小寫。按一下「使用規則運算式」使用規則運算式,即可顯示與您提供的模式相符的任何結果。您不需要在正規表示式中加上正斜線。

網路搜尋窗格中的規則運算式查詢。

圖 2. 網路搜尋窗格中的規則運算式查詢。

Global Search 窗格現在與新的Network Search 窗格 UI 一致。它現在也能以美化格式列印結果,方便掃描。

舊版和新版 UI。

圖 3. 左側為舊版 UI,右側為新版 UI

按下 Command + Option + F 鍵 (Mac) 或 Control + Shift + F 鍵 (Windows、Linux、ChromeOS) 即可開啟全球搜尋。你也可以透過指令選單開啟。

Styles 窗格中的 CSS 變數值預覽畫面

當 CSS 顏色屬性 (例如 background-colorcolor) 的值設為 CSS 變數時,DevTools 會顯示該顏色的預覽畫面。

CSS 變數顏色值範例。

圖 4. 在左側的舊版 UI 中,color: var(--main-color) 旁沒有顏色預覽畫面,但在右側的新版 UI 中,有提供顏色預覽畫面

複製為 Fetch 格式

對網路要求按一下滑鼠右鍵,然後依序選取「Copy」 >「Copy As Fetch」,即可將該要求的 fetch() 等效程式碼複製到剪貼簿。

複製要求的 fetch() 等效程式碼。

圖 5:複製要求的 fetch() 等效程式碼

DevTools 會產生類似以下的程式碼:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

「稽核」面板更新

新稽核

「稽核」面板有 2 項新的稽核,包括:

新設定選項

您現在可以設定「稽核」面板,以便執行下列操作:

  • 保留電腦檢視區和使用者代理程式設定。換句話說,您可以禁止「Audits」面板模擬行動裝置。
  • 停用網路和 CPU 節流功能。
  • 在稽核期間保留儲存空間,例如 LocalStorage 和 IndexedDB。

新的稽核設定選項。

圖 6. 新的稽核設定選項

查看追蹤記錄

稽核網頁後,請按一下「View Trace」,在「Performance」面板中查看稽核作業的負載效能資料。

「查看追蹤記錄」按鈕。

圖 7. 「查看追蹤記錄」按鈕

停止無限迴圈

如果您經常使用 for 迴圈、do...while 迴圈或遞迴,那麼您在開發網站時,可能會不小心執行無限迴圈。如要停止無限迴圈,您現在可以採取下列做法:

  1. 開啟「來源」面板。
  2. 按一下「暫停」圖示 暫停。按鈕會變更為「Resume Script Execution」繼續
  3. 按住「Resume Script Execution」繼續,然後選取「Stop Current JavaScript Call」停止

在上述影片中,時鐘會透過 setInterval() 計時器更新。按一下「Start Infinite Loop」,即可執行永不停止的 do...while 迴圈。選取「Stop Current JavaScript Call」 停止 時,間隔並未執行,因此會重新開始。

「成效」分頁中的「使用者載入時間」

查看成效記錄時,請按一下「使用者時間」部分,即可在「摘要」、「自下而上」、「呼叫樹狀圖」和「事件記錄」分頁中查看「使用者時間」評估結果。

在「自下而上」分頁中查看使用者載入時間測量結果。

圖 8. 在「由下而上」分頁中查看使用者載入時間測量結果。「User Timing」部分左側的藍色列表示已選取該部分。

一般來說,您現在可以選取任何一個區段 (主執行緒使用者時間GPUScriptStreamer 等),並在分頁中查看該區段的活動。

在「Memory」(記憶體) 面板中選取 JavaScript VM 執行個體

「Memory」面板現在會清楚列出與網頁相關聯的所有 JavaScript VM 例項,而不會像先前那樣隱藏在「Target」下拉式選單後方。

記憶體面板的螢幕截圖前後對照。

圖 9. 在左側的舊版 UI 中,JavaScript VM 執行個體會隱藏在「Target」下拉式選單後方,而在右側的新版 UI 中,這些執行個體會顯示在「Select JavaScript VM Instance」表格中

developers.google.com 例項旁邊有 2 個值:8.7 MB13.3 MB。左側值代表因 JavaScript 而分配的記憶體。右側的值代表因該 VM 執行個體而分配的所有 OS 記憶體。右側值包含左側值。在 Chrome 的「工作管理員」中,左側值對應至 JavaScript Memory,右側值則對應至 Memory Footprint

將「網路」分頁重新命名為「網頁」分頁

在「來源」面板中,「網路」分頁現在改稱為「網頁」分頁。

兩個 DevTools 視窗並排顯示,展示名稱變更。

圖 10. 在左側的舊版 UI 中,顯示網頁資源的分頁名稱為「Network」,而在右側的新版 UI 中,則為「Page」

深色主題更新

Chrome 67 推出後,深色主題的色彩配置會有一些小變動。舉例來說,中斷點圖示和目前的執行行現在會顯示為綠色。

新版中斷點圖示和目前執行行色彩配置的螢幕截圖。

圖 11. 新中斷點圖示和目前執行行色彩配置的螢幕截圖

「安全性」面板中的憑證透明化

安全性面板現在會回報憑證透明化資訊。

「安全性」面板中的憑證透明度資訊。

圖 12. 「安全性」面板中的認證透明度資訊

「效能」面板中的「網站隔離」

如果您已啟用網站隔離功能,效能面板現在會為每個程序提供火焰圖表,讓您查看每個程序造成的工作總量。

成效錄製檔案中的個別程序火焰圖。

圖 13. 效能錄製檔案中的每個程序火焰圖

下載預覽管道

建議您將 Chrome Canary開發人員版Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能,測試最新的網路平台 API,並在使用者發現問題前,協助您找出網站的問題!

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。