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

Kayce Basques
Kayce Basques

Chrome 62 開發人員工具將在 Chrome 62 推出的新功能和異動：

控制台中的頂層等待運算子

Console 現在支援頂層 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 文字的藍色標頭螢幕截圖。請注意，已在「Elements」面板的「DOM Tree」中選取這個節點。

  2. 開啟「指令選單」。

  3. 輸入 node 並選取「Capture node screenshot」。開發人員工具會下載所選節點的螢幕截圖。

    「擷取節點螢幕截圖」指令的結果

    圖 4 Capture node screenshot 指令的結果

CSS 格狀醒目顯示

如要查看影響元素的 CSS 格線，請將遊標懸停在「Elements」(元素) 面板的「DOM Tree」(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> 的「Console」訊息。

即將篩除的 3 ���訊息示例

圖 6：第一個陳述式會將 one、two、three 和 four 記錄到 Console。已隱藏 two，因為 -two 已在篩選器方塊中輸入

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

  • 內文。
  • 郵件來源檔案名稱。
  • 在堆疊追蹤文字中。

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

網址篩選器

在「Filter」(篩選器) 方塊中輸入 url:<text>，只顯示網址包含 <text> 的指令碼傳送的訊息。

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

網址篩選範例

圖 7. 使用網址篩選功能，只顯示網址包含 hymn 的指令碼發出的訊息。將滑鼠遊標懸停在指令碼名稱上，就會看到主機名稱含有這段文字

「網路」面板中的 HAR 匯入項目

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

匯入 HAR 檔案

圖 8. 匯入 HAR 檔案

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

在「Cache Storage」(快取儲存空間) 資料表中點選任一資料列，即可在資料表下方預覽該資源。

預覽快取資源

圖 9. 預覽快取資源

回應速度更快的快取偵錯

在 Chrome 61 以下版本中，對於使用 Cache API 建立的快取進行偵錯，這難免除錯。舉例來說，當頁面建立新的快取時，您必須手動重新整理頁面或開發人員工具，才能看到新的快取。

在 Chrome 62 中，「Cache Storage」分頁現在會在您每次建立、更新或刪除快取或資源時即時更新。請觀看以下影片範例。

請參閱快取儲存空間示範，親自體驗看看。

區塊層級程式碼涵蓋率

在 Chrome 61 以下版本中，「涵蓋率」分頁會標示函式中的所有程式碼，只要呼叫函式即可。

Chrome 61 的「涵蓋範圍」分頁範例

圖 10. Chrome 61 中的「涵蓋範圍」分頁範例。雖然第 4 行標示為使用中

自 Chrome 62 起，「涵蓋率」分頁現在會顯示函式中呼叫的程式碼。

Chrome 62 的「涵蓋範圍」分頁範例

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59