Chrome 72 開發者工具新特性

西樓聽雨發表於2019-03-04

效能指標視覺化

現在,在錄製了一個介面的載入後,DevTools (開發者工具)會在 Timings 一欄標記出像 DOMContentLoaded 、First Meaningful Paint (首次意義性繪製)這類效能指標。

First Meaningful Paint in the Timing section

高亮文字節點

現在,當滑鼠懸停在一個文字節點上時,DevTools 會在視窗中將該文字節點高亮顯示。

Highlighting a text node

複製 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 節點中也可以使用。

Copy JS path

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 (最佳實踐 > 通過了的審計)下找到這項審計結果。

Detected JavaScript libraries

另外,你還可以通過在命令選單中輸入 LighthousePWA 訪問 Audits 皮膚。

Typing 'lighthouse' into the Command Menu

相關文章