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

Kayce Basques

Chrome 72 版的 Chrome 開發人員工具將推出新功能和重大變更，包括：

• 在「效能」面板中以圖表呈現成效指標。
• 醒目顯示 DOM 樹狀結構中的文字節點。
• 從 DOM 樹狀結構複製 DOM 節點的 JS 路徑。
• 「稽核」面板更新，包括偵測 JS 程式庫的新稽核，以及從指令選單存取「稽核」面板的新關鍵字。

這些版本資訊的影片版本

以圖表呈現成效指標

記錄網頁載入後，開發人員工具現在會在「時間軸」部分標示 DOMContentLoaded 和首次有意義的繪製等效能指標。

圖 1. 「時間」專區中的「畫面首次有效顯示所需時間」

醒目顯示文字節點

現在只要將游標懸停在 DOM 樹狀結構中的文字節點上，開發人員工具就會在檢視區塊中醒目顯示該文字節點。

圖 2. 醒目顯示文字節點

複製 JS 路徑

假設您要編寫自動化測試，其中涉及點選節點 (可能使用 Puppeteer 的 page.click() 函式)，並想快速取得該 DOM 節點的參照。一般工作流程是前往「元素」面板，在 DOM 樹狀結構中按一下節點，依序選取「複製」 >「複製選取器」，然後將該 CSS 選取器傳遞至 document.querySelector()。但如果節點位於 Shadow DOM 中，這個方法就無法運作，因為選取器會產生來自陰影樹狀結構的路徑。

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

圖 3. 複製 JS 路徑

開發人員工具會將類似下方的運算式複製到剪貼簿：

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

「稽核」面板更新

「稽核」面板現在會執行 Lighthouse 3.2。3.2 版新增了「偵測到 JavaScript 程式庫」稽核。這項稽核會列出 Lighthouse 在網頁上偵測到的 JS 程式庫。您可以在報表的「最佳做法」>「通過的稽核」中找到這項稽核。

圖 4. 偵測到的 JavaScript 程式庫

此外，您現在可以輸入 Lighthouse 或 PWA，從指令選單存取「稽核」面板。

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

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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