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

Kayce Basques

Chrome 71 版 Chrome 開發人員工具的新功能和重大變更包括：

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

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

當即時運算式評估為 DOM 節點時，將滑鼠游標懸停在即時運算式結果上，即可在檢視區中醒目顯示該節點。

將滑鼠游標懸停在即時運算式結果上，以便在檢視區中醒目顯示節點。

圖 1. 將滑鼠游標懸停在即時運算式結果上，以便在檢視區中醒目顯示節點

將 DOM 節點儲存為全域變數

如要將 DOM 節點儲存為全域變數，請在控制台中執行可評估為節點的運算式，然後在結果上按一下滑鼠右鍵，並選取「Store as global variable」(儲存為全域變數)。

將其儲存在主控台中的全域變數中。

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

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

將其儲存在 DOM 樹狀結構中的全域變數中。

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

在 HAR 匯入和匯出作業中提供啟動者和優先順序資訊

如果您想與同事一起診斷網路記錄，可以將網路要求匯出至 HAR 檔案。

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

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

如要將檔案匯入網路面板，只要拖曳檔案即可。

匯出 HAR 檔案時，開發人員工具現在會在 HAR 檔案中加入啟動程序和優先順序資訊。將 HAR 檔案匯入開發人員工具後，系統會填入「Initiator」和「Priority」欄。

_initiator 欄位會提供更多背景資訊，說明為何要求該資源。這會對應至「Requests」表格中的「Initiator」欄。

啟動者資料欄。

圖 9. 啟動者欄

您也可以按住 Shift 鍵，並將滑鼠游標懸停在要求上，查看其啟動程序和依附元件。

查看啟動程序和依附元件。

圖 10. 查看啟動條件和依附元件

_priority 欄位會指出瀏覽器為資源指派的優先順序層級。這會對應至「Requests」表格中的「Priority」欄，該欄預設為隱藏。

「優先順序」欄。

圖 11. 「優先順序」欄

按一下要求表格的標題，然後選取「Priority」，即可顯示「Priority」欄。

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

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

從主選單存取指令選單

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

指令選單。

圖 13. 指令選單

您現在可以從主選單開啟指令選單。按一下「主選單」主要 按鈕，然後選取「執行指令」。

從主選單開啟指令選單。

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

子母畫面中斷點

Picture-in-Picture 是全新的實驗性 API，可讓網頁在電腦上建立浮動式影片視窗。

在「事件監聽器中斷點」窗格中啟用 enterpictureinpicture、leavepictureinpicture 和 resize 核取方塊，即可在任何子母畫面事件觸發時暫停。開發人員工具會在處理常式的第 1 行暫停。

「Event Listener Breakpoints」窗格中的子母畫面事件。

圖 16. 「Event Listener Breakpoints」窗格中的子母畫面事件

(額外提示) 在控制台中執行 monitorEvents()，監控元素的事件觸發情形

假設您想在將焦點放在按鈕上並按下 R、E 或 D 後，在按鈕周圍加上紅色邊框，但您不知道要將事件新增至哪些事件。使用 monitorEvents() 將所有元素事件記錄到主控台。

  1. 取得節點的參照。

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

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

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

    將節點傳遞至 monitorEvents()。

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

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

    主控台中的節點事件。

    圖 19。主控台中的節點事件

呼叫 unmonitorEvents() 即可停止將事件記錄到控制台。

unmonitorEvents(temp1);

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

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

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

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

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。