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

Kayce Basques

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

• 在「效能」面板中以視覺化方式呈現成效指標。
• 在 DOM 樹狀結構中醒目顯示文字節點。
• 將 JS 路徑複製到 DOM 樹狀結構中的 DOM 節點。
• 稽核面板更新，包括可偵測 JS 資源庫的新稽核，以及可透過指令選單存取稽核面板的新關鍵字。

這些版本資訊的影片版本

以圖表呈現成效指標

在記錄網頁載入作業後，開發人員工具會在「Timings」區段中標示 DOMContentLoaded 和「Firstingful Paint」等成效指標。

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

醒目顯示文字節點

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

圖 2. 醒目顯示文字節點

複製 JS 路徑

假設您要編寫的自動化測試涉及點選節點 (可能使用 Puppeteer 的 page.click() 函式)，且想快速取得該 DOM 節點的參照。一般來說，您可以前往「元素」面板，在 DOM 樹狀圖中的節點上按一下滑鼠右鍵，然後依序選取「複製」 >「複製 selector」，再將該 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 版包含名為「Detected JavaScript libraries」的新稽核項目。這項稽核會列出 Lighthouse 在網頁上偵測到的 JS 程式庫。您可以在報表的「最佳做法」 >「已通過的稽核」下方找到這項稽核。

圖 4. 偵測到的 JavaScript 程式庫

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

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

下載預覽管道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序點選 more_vert 和 [更多選項] > [說明] > [回報開發人員工具問題] 回報開發人員工具問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。