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

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

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

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

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

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

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

將 DOM 節點儲存為全域變數

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

在控制台中儲存為全域變數。

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

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

在 DOM 樹狀結構中儲存為全域變數。

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

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

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

將網路要求匯出至 HAR 檔案。

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

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

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

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

發起者欄。

圖 9. 發起者欄

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

查看啟動者和依附元件。

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

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

「優先順序」欄。

圖 11. 「優先順序」欄

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

如何顯示「優先順序」欄。

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

從主選單存取指令選單

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

指令選單。

圖 13. 指令選單

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

從主功能表開啟命令功能表。

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

子母畫面中斷點

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

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

「事件監聽器中斷點」窗格中的子母畫面事件。

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

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

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

  1. 取得節點的參照。

    使用「儲存為全域變數」以取得節點的參照

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

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

    將節點傳送至 MonitorEvents()。

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

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

    控制台中的節點事件。

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

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

unmonitorEvents(temp1);

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

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

mouse 類型會指示開發人員工具記錄所有滑鼠相關事件,例如 mousedownclick。 其他支援的類型包括 keytouchcontrol

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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