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

Kayce Basques

Chrome 開發人員工具 (72 版) 即將推出的新功能和重大異動，包括：

這些版本資訊的影片版本

以圖表呈現成效指標

記錄網頁載入作業後，開發人員工具現在會標示 DOMContentLoaded 和 「時間」部分中的第一個有意義的繪製。

「計時」部分的第一個有效繪製

圖 1. 「計時」部分的第一個有效繪製

醒目顯示文字節點

現在，將滑鼠遊標懸停在 DOM 樹狀結構的文字節點上時，開發人員工具就會醒目顯示該文字節點的 檢視區域

醒目顯示文字節點

圖 2. 醒目顯示文字節點

複製 JS 路徑

假設您要撰寫的自動化測試涉及點選節點 (使用 Puppeteer 的 page.click() 函式)，且您想要快速取得該 DOM 節點的參照。 一般的工作流程就是前往「元素」面板，在 DOM 樹狀結構的節點上按一下滑鼠右鍵 複製 >複製選取器，然後將該 CSS 選取器傳遞至 document.querySelector()。但 如果節點位於 Shadow DOM，由於選擇器會產生 位於陰影樹的深層中

如要快速取得 DOM 節點的參照，請在 DOM 節點上按一下滑鼠右鍵，然後選取「Copy」(複製) >複製 JS 路徑。開發人員工具會複製到剪貼簿的 document.querySelector() 運算式，指向 節點。如上所述，這在使用 Shadow DOM 時特別實用，但您可以使用 適用於任何 DOM 節點

複製 JS 路徑

圖 3. 複製 JS 路徑

開發人員工具會將如下所示的運算式複製到剪貼簿：

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

稽核面板更新

「稽核」面板現在會執行 Lighthouse 3.2。3.2 版包括名為「新的稽核」 偵測到的 JavaScript 程式庫。這份稽核會列出 Lighthouse 偵測到的 JS 程式庫 該網頁。如要查看這項稽核，請在報告的「最佳做法」部分 >通過稽核。

偵測到的 JavaScript 程式庫

圖 4. 偵測到的 JavaScript 程式庫

此外，您現在只要輸入 Lighthouse 或 PWA，即可透過指令選單存取「稽核」面板。

輸入「lighthouse」切換至指令選單

圖 5：在指令選單中輸入 lighthouse

下載預覽頻道

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

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

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

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

開發人員工具新功能

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