Chrome 72 開發者工具新特性

性能指標可視化

如今，在錄製了一個界面的加載後，DevTools （開發者工具）會在 Timings 一欄標記出像 DOMContentLoaded 、First Meaningful Paint （首次意義性繪製）這類性能指標。

高亮文本節點

如今，當鼠標懸停在一個文本節點上時，DevTools 會在視窗中將該文本節點高亮顯示。

複製 JS 路徑

假設你正在編寫一個自動化測試，其中須要點擊一個節點（一般使用的是 Puppeteer 的 page.click() 函數），因此你想快捷地獲取這個 DOM 節點的一個引用。常規的步驟是前往 Elements（元素）面板，右擊那個節點，選擇 Copy > Copy selector （複製 > 複製選擇器），而後將獲得的 CSS 選擇器傳到 document.querySelector() 。但若是那個節點位於 Shadow DOM 中的話，這種途徑就沒用了，由於所得到的選擇器將會是 Shadow 節點樹中的路徑。

要快捷地獲取到一個 DOM 節點的引用，可右擊這個 DOM 節點，選擇 Copy > Copy JS path （複製 > 複製 JS 路徑）。DevTools 會拷貝一份指向這個節點的 document.querySelector() 表達式。這種方式在 Shadow DOM 中會特別有用，固然在其餘任意 DOM 節點中也能夠使用。

DevTools 會拷貝一份像下面這樣的一份代碼到剪貼板：

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')
複製代碼

Audits (審計) 面板相關的更新

Audits 面板這 Chrome 72 中運行的將是 Lighthouse 3.2。3.2 版本中有一個新的審計項，叫作 Detected JavaScript libraries (檢測到的 JavaScript 庫）。這項審計會把 Lighthouse 在頁面中探測到的 JS 庫都列出來。你能夠在審計報告中的 Best Practices > Passed audits （最佳實踐 > 經過了的審計）下找到這項審計結果。

另外，你還能夠經過在命令菜單中輸入 Lighthouse 或 PWA 訪問 Audits 面板。