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

Kayce Basques

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

• 將滑鼠遊標懸停在即時運算式上，即可醒目顯示 DOM 節點
• 將 DOM 節點儲存為全域變數
• HAR 匯入與匯出作業現在提供發起人和優先順序資訊
• 透過主選單存取指令選單
• 子母畫面中斷點
• (額外提示) 在控制台中執行 MonitorEvents()，藉此查看元素的事件觸發

請繼續閱讀或觀看本頁的影片版本：

將滑鼠遊標懸停在有效運算式上，即可醒目顯示 DOM 節點

有效運算式評估 DOM 節點時，將滑鼠遊標懸停在「Live Expression」結果上， 醒目顯示檢視區中的節點

圖 1. 將滑鼠遊標懸停在「即時運算式」結果上，即可醒目顯示可視區域中的節點

將 DOM 節點儲存為全域變數

如要將 DOM 節點儲存為全域變數，請在 Console 中執行計算為節點的運算式， 在結果上按一下滑鼠右鍵，然後選取「Store as 全域變數」。

圖 2. 在控制台中儲存為全域變數

或者，您也可以在「DOM 樹狀結構」中的節點上按一下滑鼠右鍵，然後選取「儲存為全域變數」。

圖 3. 在 DOM 樹狀結構中儲存為全域變數

HAR 匯入與匯出作業現在支援發起人和優先順序資訊

如要與同事診斷網路記錄，請將網路要求匯出至 HAR 檔案。

圖 8. 將網路要求匯出至 HAR 檔案

如要將檔案重新匯入至「網路」面板，只要拖曳檔案即可。

現在匯出 HAR 檔案時，開發人員工具會在 HAR 中加入發起者和優先順序資訊 檔案。當將 HAR 檔案匯入開發人員工具後，您會看到「Initiator」和「Priority」欄 已填入資料

_initiator 欄位可針對要求資源的原因提供更多資訊。這個 對應至「要求」表格中的「發起者」欄。

圖 9. 發起者欄

你也可以按住 Shift 鍵並將滑鼠遊標懸停在要求上，即可查看發起者和 依附元件

圖 10. 查看發起者和依附元件

_priority 欄位會指出瀏覽器指派給資源的優先等級。這張地圖會對應至 「要求」表格中的「優先順序」欄 (預設為隱藏)。

圖 11. 「優先順序」欄

在「要求」表格的標頭上按一下滑鼠右鍵，然後選取「Priority」即可顯示「Priority」。 。

圖 12. 如何顯示「優先順序」欄

從主選單存取指令選單

使用命令選單即可快速存取開發人員工具面板、分頁和功能。

圖 13. 指令選單

您現在可以從主選單開啟「Command」功能表。按一下「主選單」圖示 按鈕，然後選取「Run command」。

圖 14.從主選單開啟命令選單

子母畫面中斷點

子母畫面是全新的實驗性 API，可讓網頁建立浮動影片 視窗上方。

在事件中勾選 enterpictureinpicture、leavepictureinpicture 和 resize 核取方塊 事件監聽器中斷點窗格，每當這些子母畫面事件觸發時暫停。 開發人員工具會在處理常式的第一行暫停。

圖 16. 事件監聽器中斷點窗格中的子母畫面事件

(額外提示) 在控制台中執行 MonitorEvents()，藉此查看元素的事件觸發情形

假設您想在聚焦的按鈕周圍加上紅色邊框，然後按下 R、E、D、 但不知道要在哪些事件中新增事件監聽器。使用 monitorEvents() 記錄 元素向控制台傳送

1. 取得節點的參照。

   

   圖 17. 使用「Store as 全域變數」取得節點的參照

2. 將節點做為第一個引數傳遞至 monitorEvents()。

   

   圖 18. 將節點傳送至 monitorEvents()

3. 與節點互動，開發人員工具會將節點的所有事件記錄到控制台。

   

   圖 19.控制台中的節點事件

呼叫 unmonitorEvents() 來停止將事件記錄至控制台。

unmonitorEvents(temp1);

如果您只想監控特定事件，請將陣列做為第二個引數傳遞至 monitorEvents() 或事件類型

monitorEvents(temp1, ['mouse', 'focus']);

mouse 類型會指示開發人員工具記錄所有滑鼠相關事件，例如 mousedown 和 click。 其他支援的類型包括 key、touch 和 control。

請參閱指令列參考資料，瞭解其他可從控制台呼叫的實用函式。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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