效能指標視覺化
現在,在錄製了一個介面的載入後,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 皮膚。