Chrome 72 開發者工具新特性
阿新 • • 發佈：2018-12-04
效能指標視覺化
現在，在錄製了一個介面的載入後，DevTools （開發者工具）會在 Timings 一欄標記出像 DOMContentLoaded 、First Meaningful Paint （首次意義性繪製）這類效能指標。
高亮文字節點
現在，當滑鼠懸停在一個文字節點上時，DevTools 會在視窗中將該文字節點高亮顯示。
複製 JS 路徑
假設你正在編寫一個自動化測試，其中需要點選一個節點（通常使用的是 Puppeteer 的 page.click() 函式），所以你想快捷地獲取這個 DOM 節點的一個引用。常規的步驟是前往 Elements（元素）面板，右擊那個節點，選擇 Copy > Copy selector
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 面板。