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

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

版本資訊影片版本

開啟「網路」面板,然後按下 Command + F (Mac) 或 Control + F 鍵 (Windows、Linux、ChromeOS),開啟新的「網路搜尋」窗格。開發人員工具會搜尋標頭 所有網路請求的標頭和主體

搜尋「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-colorcolor) 設為 CSS 時 變數,開發人員工具現在會顯示該顏色的預覽畫面。

CSS 變數顏色值範例。

圖 4. 在舊的使用者介面中, color: var(--main-color),而在右側的新 UI 中

複製為 擷取

在網路要求上按一下滑鼠右鍵,然後選取「複製」>複製為擷取工具,將 針對該要求複製到剪貼簿的 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"
});

稽核面板更新

全新稽核

「Audits」面板提供 2 項新的稽核,包括:

新的設定選項

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

  • 保留電腦可視區域和使用者代理程式設定。也就是說,您可以防止稽核 模擬行動裝置的樣本
  • 停用網路和 CPU 節流功能。
  • 針對各項稽核保留 LocalStorage 和 IndexedDB 等儲存空間。

全新稽核設定選項。

圖 6. 全新稽核設定選項

查看追蹤記錄

稽核網頁後,按一下「查看追蹤記錄」,即可查看稽核的載入效能資料

「View Trace」按鈕。

圖 7. 「View Trace」按鈕

停止無限迴圈

如果您經常使用 for 迴圈、do...while 迴圈或重複週期,則您可能執行了 開發網站期間發生錯誤,無限迴圈。如要停止無限迴圈,您現在可以:

  1. 開啟「來源」面板。
  2. 按一下「暫停」圖示 暫停。按鈕會變成「恢復」 指令碼執行 繼續
  3. 保留「Resume Script Execution」繼續,然後選取「停止」 目前的 JavaScript 呼叫: 停止

在上方的影片中,系統正在透過 setInterval() 計時器更新時鐘。按一下「開始」 Infinite Loop 執行不會停止的 do...while 迴圈。因為發生問題,間隔就會繼續 發生 Stop Current JavaScript Call 停止 時 已選取。

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

查看成效記錄時,按一下「使用者載入時間」部分即可查看「使用者載入時間」 測量在「Summary」、「Bottom-Up」、「Call Tree」和「Event Log」分頁中。

在「由下而上」分頁中查看使用者載入時間測量指標。

圖 8. 在「Bottom-Up」分頁中查看使用者載入時間測量指標。 「使用者載入時間」部分代表已選取。

一般來說,您現在可以選取任何區段 (「Main Thread」、「User Timing」、「GPU」ScriptStreamer 等) 以及該區段的活動。

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

「記憶體」面板現在清楚列出與頁面相關聯的所有 JavaScript VM 執行個體。 而不要隱藏在「目標」下拉式選單下方的

「Memory」面板的「之前」和「之後」螢幕截圖。

圖 9. 在左側的舊版使用者介面中,JavaScript VM 執行個體隱藏在 目標下拉式選單,右側新版 UI 則會顯示在選取 JavaScript VM 執行個體資料表

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

「Network」分頁已重新命名為「Page」分頁

「來源」面板的「網路」分頁現已改稱「頁面」分頁。

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

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

深色主題更新

Chrome 67 內建幾項深色主題的色彩配置變更。舉例來說, 中斷點圖示和目前執行的行以綠色顯示。

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

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

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

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

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

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

效能面板中的網站隔離

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

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

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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