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

Chrome 62 版開發人員工具即將推出下列新功能和變更：

• 在控制台中支援頂層 await 運算子。
• 可擷取部分檢視區塊的螢幕截圖，以及特定 HTML 節點的螢幕截圖。
• CSS 格線醒目顯示。
• 用於查詢物件的全新 Console API。
• 控制台中的負片濾鏡和網址篩選器。
• 「網路」面板中的 HAR 匯入作業。
• 可預覽的快取資源。
• 更易於預測的快取偵錯。
• 區塊層級的程式碼涵蓋範圍。

控制台中的頂層 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。開發人員工具會下載所選節點的螢幕截圖。

   

   圖 4. Capture node screenshot 指令的結果

CSS 格線醒目顯示

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

圖 5：醒目顯示 CSS 格線

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

用於查詢堆積物件的新 API

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

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

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

新版管理中心篩選器

控制台現在支援負面和網址篩選器。

負片濾鏡

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

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

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

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

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

網址篩選條件

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

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

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

在「網路」面板中匯入 HAR 檔案

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

圖 8. 匯入 HAR 檔案

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

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

圖 9. 預覽快取資源

更快速地偵錯快取

在 Chrome 61 之前的版本中，偵錯使用 Cache API 建立的快取相當困難。舉例來說，如果網頁建立新的快取，您必須手動重新整理網頁或開發人員工具，才能看到新的快取。

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

如要親自試用，請參閱 Cache Storage 示範。

區塊層級的程式碼涵蓋率

在 Chrome 61 之前的版本中，只要呼叫函式，涵蓋範圍分頁就會將函式中的所有程式碼標示為已使用。

圖 10. Chrome 61 中的「涵蓋範圍」分頁範例。第 4 行標示為已使用，即使從未執行

從 Chrome 62 開始，「涵蓋範圍」分頁會顯示函式中呼叫的程式碼。

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

下載預覽版頻道

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

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。