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. 點選其中一個「二進位訊息」項目進行檢查。

   

   圖 8. 檢查二進位訊息

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

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

在「Command」選單中擷取區域螢幕截圖

區域螢幕截圖可讓您擷取部分可視區域的螢幕截圖。這項功能 但存取資料的工作流程完全隱藏起來了現已新增區域螢幕截圖 可以使用指令選單

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

   

   圖 10. 指令選單

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

3. 將遊標拖曳至要擷取螢幕截圖的可視區域上。

   

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

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

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

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

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

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

效能面板更新

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

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

Performance Record 的長時間工作

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

圖 14.將滑鼠遊標懸停在表演錄製內容中較長的工作上

「時間」部分的第一個繪製內容

表演記錄的「時機」部分現在會標示「首次顯示所需時間」。

圖 15.「時間」部分的第一個繪製內容

新的 DOM 教學課程

如需 DOM 相關實作導覽，請參閱開始使用檢視和變更 DOM 接著介紹網際網路通訊層 包括兩項主要的安全防護功能

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

• 歡迎透過 crbug.com 提出建議或意見。
• 使用「更多選項」 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
• 前往 @ChromeDevTools 張貼 Tweet。
• 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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