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

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」(元素) 面板

  2. 開啟「指令選單」。

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

    「擷取節點螢幕截圖」的結果Command 鍵

    圖 4. Capture node screenshot 指令的結果

CSS 格狀醒目顯示

如要查看影響元素的 CSS 格線，請將遊標懸停在 「Elements」(元素) 面板。每個格線項目周圍都會顯示虛線框線。只有在 所選項目或所選項目的父項已套用「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/ 等規則運算式。

網址篩選器

在「篩選器」方塊中輸入 url:<text> 以只顯示來自指令碼的郵件 網址包含 <text>。

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

網址篩選範例

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

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

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

匯入 HAR 檔案

圖 8. 匯入 HAR 檔案

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

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

預覽快取資源

圖 9. 預覽快取資源

回應速度更快的快取偵錯

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

在 Chrome 62 中，「快取儲存空間」分頁現在會即時更新您建立、更新或 像是快取或資源請觀看以下影片範例。

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

區塊層級程式碼涵蓋率

在 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 影片留言。

開發人員工具新功能

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