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

Kayce Basques

Chrome 67 版開發人員工具即將推出的新功能和重大異動包括：

版本資訊的版本：

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

在新的「網路搜尋」窗格中搜尋「cache-control」文字。

圖 1：使用新的「網路搜尋」窗格搜尋「cache-control」文字

按一下「Match Case」大小寫相符，讓查詢區分大小寫。按一下「Use Regular Expression」圖示 使用規則運算式，顯示符合所提供模式的任何結果。不必將規則運算式包裝在正斜線中。

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

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

「Global Search」窗格的使用者介面現在與新版「網路搜尋」窗格的使用者介面相符。此外，系統現在也可以美化結果來方便瀏覽。

舊版與新版 UI。

圖 3：左側的舊使用者介面，右側為新版 UI

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

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

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

CSS 變數顏色值範例。

圖 4 在左側的舊版 UI 中，color: var(--main-color) 旁邊沒有顏色預覽，而在右側的新版 UI 中，則是

複製為擷取內容

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

為要求複製與 get() 相等的程式碼。

圖 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"
});

「Audits」面板更新

新稽核

「稽核」面板有 2 項新的稽核項目，包括：

新設定選項

您現在可以設定「Audits」面板執行下列操作：

  • 保留電腦版可視區域和使用者代理程式設定。換句話說，您可以防止「稽核」面板模擬行動裝置。
  • 停用網路和 CPU 節流功能。
  • 保留各項稽核所需的本機儲存空間，例如 LocalStorage 和 IndexedDB。

新的稽核設定選項。

圖 6：全新稽核設定選項

查看追蹤記錄

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

「View Trace」按鈕。

圖 7. 「View Trace」按鈕

停止無限迴圈

如果處理 for 迴圈、do...while 迴圈或經常遞迴，您可能在開發網站時不小心執行了無限迴圈。如要停止無限迴圈，您現在可以：

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

在上方影片中，時鐘會透過 setInterval() 計時器更新。按一下「Start Infinite Loop」，就會執行不會停止的 do...while 迴圈。由於在已選取「Stop Current JavaScript Call」圖示 停止 時，您並未執行這個間隔，因此間隔會恢復。

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

查看效能記錄時，按一下「使用者時間」部分，即可在「Summary」、「Bottom-Up」、「Call Tree」和「Event Log」分頁中查看使用者操作時間測量結果。

在「底部」分頁中查看使用者載入時間測量指標。

圖 8. 在「Bottom-Up」分頁中查看使用者載入時間測量指標。「User Timing」(使用者載入時間) 部分左側的藍色列表示已選取。

一般來說，您現在可以選取任何區段 (Main Thread、User Timing、GPU、ScriptStreamer 等)，並在分頁中查看該區段的活動。

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

「Memory」(記憶體) 面板現在可清楚列出與網頁相關聯的所有 JavaScript VM 執行個體，而不是像之前一樣在「Target」(目標) 下拉式選單中隱藏這些執行個體。

「記憶體」面板的前後對照圖。

圖 9. 在左側的使用者介面中，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。

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

在「Sources」面板上，「Network」分頁現已改稱「Page」分頁。

兩個並排的開發人員工具視窗，說明名稱異動。

圖 10. 在左側舊版使用者介面中，顯示網頁資源的分頁稱為「網路」，在右側新版使用者介面中稱為「頁面」

深色主題更新

Chrome 67 推出針對深色主題色彩配置進行多項小幅變更。舉例來說，中斷點圖示和目前執行行會以綠色顯示。

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

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

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

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

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

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

「Performance」面板中的「網站隔離」功能

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

錄音檔中每個程序的火焰圖。

圖 13. 錄音中每個程序的火焰圖

下載預覽管道

考慮使用 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