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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

將滑鼠游標懸停在「Live Expression」結果上，即可醒目顯示檢視區塊中的節點。

圖 1. 將游標懸停在「Live Expression」結果上，即可在檢視區塊中醒目顯示節點

將 DOM 節點儲存為全域變數

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

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

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

或者，在 DOM 樹狀結構中按一下節點，然後選取「儲存為全域變數」。

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

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

HAR 匯入和匯出作業現在會提供啟動器和優先順序資訊

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

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

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

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

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

_initiator 欄位提供更多背景資訊，說明資源遭到要求的原因。這會對應至「要求」表格中的「申請者」欄。

「啟動器」欄。

圖 9. 啟動器資料欄

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

查看發起者和依附元件。

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

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

「優先順序」欄。

圖 11. 「優先順序」欄

在「要求」表格的標題上按一下滑鼠右鍵，然後選取「優先順序」，即可顯示「優先順序」欄。

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

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

從主選單存取指令選單

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

指令選單。

圖 13. 指令選單

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

從主選單開啟命令選單。

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

子母畫面中斷點

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

在「事件監聽器中斷點」窗格中勾選 enterpictureinpicture、leavepictureinpicture 和 resize 核取方塊，即可在其中一個子母畫面事件觸發時暫停。 開發人員工具會在處理常式的首行暫停。

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

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

(額外提示) 在控制台中執行 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 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。