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

Kayce Basques

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

這些版本資訊的影片版本

以圖表呈現成效指標

錄製網頁載入後，開發人員工具現在會在「Timings」部分標示 DOMContentLoaded 和「First Meaningful Paint」等效能指標。

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

圖 1. 「時間」部分中的「首次有效顯示」

醒目顯示文字節點

當您將滑鼠游標懸停在 DOM 樹狀結構中的文字節點上時，DevTools 會在檢視區中醒目顯示該文字節點。

醒目顯示文字節點

圖 2. 醒目顯示文字節點

複製 JS 路徑

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

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

複製 JS 路徑

圖 3. 複製 JS 路徑

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

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

「稽核」面板更新

稽核面板現在執行 Lighthouse 3.2。3.2 版包含名為「Detected JavaScript libraries」的新稽核項目。這項稽核會列出 Lighthouse 在網頁上偵測到的 JS 程式庫。您可以在報表的「最佳做法」 >「已通過的稽核」下方找到這項稽核。

偵測到的 JavaScript 程式庫

圖 4. 偵測到的 JavaScript 程式庫

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

在指令選單中輸入「lighthouse」

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

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。