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

Kayce Basques
Kayce Basques
X GitHub

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

版本資訊影片：

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

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

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

按一下「Match Case」(區分大小寫) 大小寫相符，讓查詢區分大小寫。按一下「Use Regular Expression」(使用規則運算式) 使用規則運算式，即可顯示與您提供的模式相符的任何結果。您不需要在規則運算式前後加上正斜線。

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

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

「Global Search」窗格的使用者介面現在與新的「Network Search」窗格使用者介面一致。現在也會美化排版結果，方便使用者瀏覽。

新舊 UI。

圖 3. 左側為舊版使用者介面，右側為新版使用者介面

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

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

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

CSS 變數顏色值的範例。

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

複製為 fetch

在網路要求上按一下滑鼠右鍵，然後依序選取「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 項稽核，包括：

新設定選項

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

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

新的稽核設定選項。

圖 6. 新的稽核設定選項

查看追蹤記錄

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

「查看追蹤記錄」按鈕。

圖 7. 「View Trace」按鈕

停止無限迴圈

如果您經常使用 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」停止 時，間隔並未執行，因此間隔會繼續執行。

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

查看效能記錄時，按一下「User Timing」部分，即可在「Summary」、「Bottom-Up」、「Call Tree」和「事件記錄」分頁中查看使用者載入時間測量結果。

在「Bottom-Up」分頁中查看使用者載入時間測量結果。

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

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

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

「Memory」面板現在會清楚列出與網頁相關聯的所有 JavaScript VM 執行個體，而不是像以前一樣隱藏在「Target」下拉式選單後方。

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

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

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. 新中斷點圖示和目前執行行色彩配置的螢幕截圖

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

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

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

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

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

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

效能錄製中的各程序火焰圖。

圖 13. 成效記錄中的個別程序火焰圖

下載預覽管道

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

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

您可以透過下列管道，討論新功能、更新或任何與開發人員工具相關的事項。

開發人員工具新功能

開發人員工具新功能系列文章涵蓋的所有內容清單。