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

Kayce Basques

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。

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

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

在「Styles」窗格中預覽 CSS 變數值

如果 CSS 顏色屬性值 (例如 background-color 或 color) 設為 CSS 變數，開發人員工具現在會顯示該顏色的預覽畫面。

CSS 變數顏色值的範例。

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

複製為 擷取

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

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

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

開發人員工具會產生類似以下的程式碼：

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」(停止目前 JavaScript 呼叫) 停止 時並未執行，因此間隔會繼續。

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

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

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

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

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

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

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

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

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

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

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

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

兩個開發人員工具視窗並排，呈現名稱變更。

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

深色主題更新

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

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

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

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

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

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

圖 12. 「安全性」面板中的認證資訊公開資訊

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

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

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

圖 13. 表演記錄中每個程序的火焰圖

下載預覽頻道

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

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

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

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。