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

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

• 搜尋所有網路標頭
• 「Styles」窗格中的 CSS 變數值預覽
• 複製為擷取格式
• 全新稽核、電腦設定選項和查看追蹤記錄
• 停止無限迴圈
• 「效能」分頁的使用者載入時間
• 在「記憶體」面板中明確列出 JavaScript VM 執行個體
• 「來源」面板中的「聯播網」分頁已重新命名為「網頁」分頁
• 深色主題更新
• 「安全性」面板中的憑證透明化資訊
• 「效能」面板中的網站隔離功能

版本資訊影片版本：

搜尋所有網路標頭和回應

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

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

按一下「大小寫相符」圖示 開始查詢 區分大小寫。按一下「使用規則運算式」 以顯示任何符合的結果 提供的模式不必將規則運算式納入正斜線。

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

搜尋窗格 UI 更新

「Global Search」窗格的使用者介面現在與新「Network Search」窗格的使用者介面相符。現在 然後根據結果進行美化排版，以便瀏覽。

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

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

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

當 CSS 顏色屬性值 (例如 background-color 或 color) 設為 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. 全新稽核設定選項

查看追蹤記錄

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

圖 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 執行個體。 而不要隱藏在「Target」下拉式選單後方

圖 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 分頁已重新命名為「頁面」分頁

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

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

深色主題更新

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

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

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

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

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

效能面板中的網站隔離

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

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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