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

Kayce Basques

歡迎回來！以下是最新異動。

這個頁面的影片版本

醒目顯示受 CSS 屬性影響的所有節點

將滑鼠游標懸停在影響節點的邊框模型的 CSS 屬性上，例如 padding 或 margin，即可醒目顯示受該宣告影響的所有節點。

圖 1. 將滑鼠游標懸停在 margin 屬性上，系統會醒目顯示受該宣告影響的所有節點邊界

「稽核」面板中的 Lighthouse 4

新的「輕觸目標未設定成適當大小」稽核項目會檢查按鈕和連結等互動元素在行動裝置上的大小和間距是否適當。

報表的 PWA 類別現在採用徽章評分系統。

圖 3. PWA 類別的新徽章評分系統

WebSocket 二進位訊息檢視器

如要查看二進位 WebSocket 訊息的內容，請按照下列步驟操作：

1. 開啟「網路」面板。請參閱「檢查網路活動」，瞭解分析網路活動的基本概念。

   

   圖 4. 「網路」面板

2. 按一下「WS」WS，即可篩除所有非 WebSocket 連線的資源。

   

   圖 5：點選「WS」後，只會顯示 WebSockety 連線

3. 按一下 WebSocket 連線的「名稱」，即可檢查該連線。

   

   圖 6. 檢查 WebSocket 連線

4. 按一下「Messages」(訊息) 分頁標籤。

   

   圖 7. 「訊息」分頁

5. 按一下其中一個「Binary Message」項目即可檢查。

   

   圖 8. 檢查二進位訊息

使用檢視器底部的下拉式選單，將訊息轉換為 Base64 或 UTF-8。按一下「Copy to clipboard」，將二進位訊息複製到剪貼簿。

圖 9. 以 Base64 格式查看二進位訊息

指令選單中的擷取區域螢幕截圖

區域螢幕截圖可讓您擷取可視區域的部分畫面。這項功能已推出一段時間，但存取這項功能的工作流程相當隱密。您現在可以透過指令選單擷取區域螢幕截圖。

1. 將焦點放在開發人員工具，然後按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac)，即可開啟指令選單。

   

   圖 10. 指令選單

2. 開始輸入 area，選取「擷取區域螢幕截圖」，然後按下 Enter 鍵。

3. 將滑鼠游標拖曳至要擷取螢幕截圖的檢視區範圍。

   

   圖 11. 選取要擷取螢幕截圖的可視區域部分

「網路」面板中的服務工作者篩選器

在「網路」面板篩選器文字方塊中輸入 is:service-worker-initiated 或 is:service-worker-intercepted，即可查看服務工作程引發 (initiated) 或可能修改 (intercepted) 的要求。

圖 12. 依「is:service-worker-initiated」篩選

圖 13. 依「is:service-worker-intercepted」篩選

如要進一步瞭解如何篩選網路記錄，請參閱「篩選資源」。

效能面板更新

效能記錄現在會標示長時間的工作和第一筆繪製作業。

請參閱「減少主執行緒工作量」，瞭解如何使用「效能」面板分析網頁載入效能。

效能錄製檔案中的長時間工作

效能記錄現在會顯示長時間的工作。

圖 14.在效能錄製檔案中將滑鼠游標懸停在長時間工作上

「Timings」部分中的「First Paint」

效能記錄的「Timings」部分現在會標示「First Paint」。

圖 15.「Timings」部分中的「First Paint」

新的 DOM 教學課程

請參閱「開始查看及變更 DOM」，瞭解 DOM 相關功能的實作操作。

下載預覽管道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

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