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 only」後，系統只會顯示 WebSocket 連線

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

   

   圖 6. 檢查 WebSocket 連線

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

   

   圖 7. 「訊息」分頁

5. 按一下其中一個「Binary Message」(二進位訊息) 項目進行檢查。

   

   圖 8. 檢查二進位訊息

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

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

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

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

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

   

   圖 10. 指令選單

2. 開始輸入 area，選取「擷取部分畫面」，然後按下 Enter 鍵。

3. 將滑鼠游標拖曳到要擷取螢幕截圖的檢視區塊部分。

   

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

「網路」面板中的 Service Worker 篩選器

在「網路」面板篩選器文字方塊中輸入 is:service-worker-initiated 或 is:service-worker-intercepted，即可查看由 Service Worker 造成 (initiated) 或可能修改 (intercepted) 的要求。

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

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

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

效能面板更新

效能記錄現在會標記長時間工作和首次算繪。

如需使用「效能」面板分析網頁載入效能的範例，請參閱「減少主執行緒工作」。

效能記錄中的長時間工作

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

圖 14.將游標懸停在「效能」記錄中的長時間工作上

「時間」部分中的「首次顯示」

效能記錄的「時間軸」部分現在會標示「首次繪製」。

圖 15.「時間」部分中的「首次顯示」

新的 DOM 教學課程

如要實際瞭解 DOM 相關功能，請參閱「開始查看及變更 DOM」。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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