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

歡迎回來!以下是本次更新的內容。

本頁的影片版本

醒目顯示受 CSS 資源影響的所有節點

將滑鼠遊標懸停在會影響節點方塊模型的 CSS 屬性 (例如 paddingmargin) 上,即可執行以下動作: 醒目顯示受到該項宣告影響的所有節點。

將滑鼠遊標懸停在邊界屬性上,即可醒目顯示受到該項宣告影響的所有節點

圖 1. 將滑鼠遊標懸停在 margin 屬性上,即可醒目顯示受該屬性影響的所有節點的邊界 宣告

稽核面板中的 Lighthouse 第 4 版

新的「輕觸目標並未適當設定大小」稽核會檢查各項互動元素,例如 按鈕和連結在行動裝置上的大小適當,而且彼此有距離。

報告的 PWA 類別現在採用標記評分系統。

PWA 類別的全新徽章評分系統

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

WebSocket 二進位訊息檢視器

如何查看二進位 WebSocket 訊息內容:

  1. 開啟「網路」面板。如要瞭解分析作業的基本概念,請參閱「檢查網路活動」一節 以及網路活動

    網路面板

    圖 4. 網路面板

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

    點選後只會顯示 WS WebSockety 連線

    圖 5:點選後,只顯示 WS WebSockety 連線

  3. 按一下 WebSocket 連線的「名稱」來檢查連線。

    檢查 WebSocket 連線

    圖 6. 檢查 WebSocket 連線

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

    「訊息」分頁

    圖 7. 「訊息」分頁

  5. 點選其中一個「二進位訊息」項目進行檢查。

    檢查二進位訊息

    圖 8. 檢查二進位訊息

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

查看以 Base64 形式查看二進位訊息

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

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

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

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

    指令選單

    圖 10. 指令選單

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

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

    選取要擷取的可視區域部分

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

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

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

篩選依據為 is:service-worker-initiated

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

篩選依據為 is:service-worker 攔截

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

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

效能面板更新

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

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

Performance Record 的長時間工作

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

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

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

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

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

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

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

新的 DOM 教學課程

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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