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

Kayce Basques

Chrome 62 版開發人員工具的新功能和變更：

控制台中的頂層 await 運算子

主控台現在支援頂層 await 運算子。

在控制台中使用頂層 await 運算子

圖 1. 在控制台中使用頂層 await 運算子

新的螢幕截圖工作流程

您現在可以擷取檢視區的部分畫面，或特定 HTML 節點的螢幕截圖。

檢視區的部分螢幕截圖

如要擷取檢視區的部分畫面：

  1. 點選「檢查」圖示 檢查，或按下 Command + Shift + C 鍵 (Mac) 或 Control + Shift + C 鍵 (Windows、Linux)，即可進入「檢查元素」模式。
  2. 按住 Command 鍵 (Mac) 或 Control 鍵 (Windows、Linux)，然後選取要擷取螢幕截圖的檢視區範圍。
  3. 放開滑鼠。開發人員工具會下載您選取的部分螢幕截圖。

擷取檢視區的部分畫面

圖 2. 擷取檢視區的部分畫面

特定 HTML 節點的螢幕截圖

如要擷取特定 HTML 節點的螢幕截圖，請按照下列步驟操作：

  1. 在「元素」面板中選取元素。

    節點示例

    圖 3. 在這個範例中，目標是擷取含有文字 Tools 的藍色標頭螢幕截圖。請注意，這個節點已在「元素」面板的 DOM 樹狀結構中選取

  2. 開啟指令選單。

  3. 開始輸入 node，然後選取 Capture node screenshot。開發人員工具會下載所選節點的螢幕截圖。

    「Capture node screenshot」指令的結果

    圖 4. Capture node screenshot 指令的結果

CSS 格線醒目顯示

如要查看影響元素的 CSS 格線，請將滑鼠游標懸停在「元素」面板的 DOM 樹狀結構中，每個格狀項目周圍都會顯示虛線框線。只有在選取的項目或選取項目的父項已套用 display:grid 時，這項操作才會生效。

強調 CSS 格線

圖 5：強調 CSS 格線

請觀看下方影片，在不到 2 分鐘的時間內瞭解 CSS 格線的基本概念。

用於查詢堆積物件的全新 API

從「控制台」呼叫 queryObjects(Constructor)，即可傳回使用指定建構函式建立的物件陣列。例如：

  • queryObjects(Promise)：傳回所有 Promise。
  • queryObjects(HTMLElement)：傳回所有 HTML 元素。
  • queryObjects(foo)，其中 foo 是函式名稱。傳回透過 new foo() 例項化的所有物件。

queryObjects() 的範圍是 控制台 中目前選取的執行情境。請參閱「選取執行作業結構定義」。

新版管理中心篩選器

控制台現在支援排除和網址篩選器。

負片濾鏡

在「篩選器」方塊中輸入 -<text>，即可篩除任何包含 <text> 的「控制台」訊息。

以下是 3 則會遭到篩除的訊息示例

圖 6. 第一個陳述式會將 one、two、three 和 four 記錄到控制台。two 已隱藏，因為 -two 已輸入至「Filter」方塊

如果找到 <text>，開發人員工具會篩除訊息：

  • 在訊息文字中。
  • 訊息來源檔案名稱中。
  • 在堆疊追蹤文字中。

排除篩選器也適用於 -/[4-5]*ms/ 等規則運算式。

網址篩選器

在「Filter」方塊中輸入 url:<text>，即可只顯示來自指令碼的訊息，且該指令碼的網址包含 <text>。

篩選器會使用模糊比對功能。如果網址中的任何位置出現 <text>，開發人員工具就會顯示這則訊息。

網址篩選功能示例

圖 7. 使用網址篩選功能，只顯示網址含有 hymn 的指令碼產生的訊息。將滑鼠游標懸停在指令碼名稱上，即可看到主機名稱包含此文字

「網路」面板中的 HAR 匯入功能

將 HAR 檔案拖曳到「Network」面板，即可匯入檔案。

匯入 HAR 檔案

圖 8. 匯入 HAR 檔案

應用程式面板中的快取資源可供預覽

點選「快取儲存空間」表格中的一列，即可在表格下方查看該資源的預覽畫面。

預覽快取資源

圖 9. 預覽快取資源

更即時的快取偵錯

在 Chrome 61 以下版本中，使用 Cache API 建立的快取偵錯功能相當粗糙。舉例來說，當網頁建立新的快取時，您必須手動重新整理網頁或開發人員工具，才能查看新的快取。

在 Chrome 62 中，每當您建立、更新或刪除快取或資源時，「快取儲存空間」分頁現在都會即時更新。請觀看下方影片，瞭解如何操作。

請參閱快取儲存空間示範，親自試用這項功能。

區塊層級程式碼涵蓋率

在 Chrome 61 以下版本中，只要函式被呼叫，Coverage 分頁就會將函式內的所有程式碼標示為已使用。

Chrome 61 中的「涵蓋率」分頁範例

圖 10. Chrome 61 中的「涵蓋率」分頁範例。即使第 4 行從未執行，系統仍會將其標示為已使用

從 Chrome 62 開始，涵蓋率分頁現在會指出函式中呼叫哪些程式碼。

Chrome 62 中的「涵蓋率」分頁範例

圖 11. Chrome 62 中的「Coverage」分頁範例。標示為未使用的第 4 行

下載預覽管道

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

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。