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

Kayce Basques

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

控制台中的頂層 await 運算子

Console 現在支援頂層 await 運算子。

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

圖 1：在主控台中使用頂層 await 運算子

新增螢幕截圖工作流程

你現在可以擷取部分可視區域或特定 HTML 節點的螢幕截圖。

部分可視區域的螢幕截圖

如要擷取部分可視區域的螢幕截圖，請按照下列步驟操作：

  1. 按一下「Inspect」圖示 檢查，或按下 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 格線，請前往「元素」面板的「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 記錄至控制台。系統已隱藏 two，因為您在「篩選器」方塊中輸入 -two

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

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

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

網址篩選器

在「Filter」方塊中輸入 url:<text>，只顯示網址包含 <text> 的指令碼所產生的訊息。

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

網址篩選示例

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

「Network」面板中的 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 的「涵蓋範圍」分頁範例。第 4 行標示為未使用

下載預覽管道

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

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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