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

Kayce Basques

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-color 或 color) 設為 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 MB 和 13.3 MB。左側 值代表因 JavaScript 而配置的記憶體。右側值代表所有 OS 記憶體 表示該 VM 執行個體的分配比例右側值則包含左值。 在 Chrome 工作管理員中，左側值對應 JavaScript Memory 和右側值 對應 Memory Footprint。

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

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

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

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

深色主題更新

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

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

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

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

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

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

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

效能面板中的網站隔離

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

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

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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