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

Chrome 開發人員工具 (72 版) 即將推出的新功能和重大異動,包括:

這些版本資訊的影片版本

以圖表呈現成效指標

記錄網頁載入作業後,開發人員工具現在會標示 DOMContentLoaded 和 「時間」部分中的第一個有意義的繪製

「計時」部分的第一個有效繪製

圖 1. 「計時」部分的第一個有效繪製

醒目顯示文字節點

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

醒目顯示文字節點

圖 2. 醒目顯示文字節點

複製 JS 路徑

假設您要撰寫的自動化測試涉及點選節點 (使用 Puppeteer 的 page.click() 函式),且您想要快速取得該 DOM 節點的參照。 一般的工作流程就是前往「元素」面板,在 DOM 樹狀結構的節點上按一下滑鼠右鍵 複製 >複製選取器,然後將該 CSS 選取器傳遞至 document.querySelector()。但 如果節點位於 Shadow DOM,由於選擇器會產生 位於陰影樹的深層中

如要快速取得 DOM 節點的參照,請在 DOM 節點上按一下滑鼠右鍵,然後選取「Copy」(複製) >複製 JS 路徑。開發人員工具會複製到剪貼簿的 document.querySelector() 運算式,指向 節點。如上所述,這在使用 Shadow DOM 時特別實用,但您可以使用 適用於任何 DOM 節點

複製 JS 路徑

圖 3. 複製 JS 路徑

開發人員工具會將如下所示的運算式複製到剪貼簿:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

稽核面板更新

「稽核」面板現在會執行 Lighthouse 3.2。3.2 版包括名為「新的稽核」 偵測到的 JavaScript 程式庫。這份稽核會列出 Lighthouse 偵測到的 JS 程式庫 該網頁。如要查看這項稽核,請在報告的「最佳做法」部分 >通過稽核

偵測到的 JavaScript 程式庫

圖 4. 偵測到的 JavaScript 程式庫

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

輸入「lighthouse」切換至指令選單

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

下載預覽頻道

建議您使用 Chrome CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

請使用下列選項,討論貼文中的新功能和異動,或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

開發人員工具新功能」系列中的所有文章清單。