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

Kayce Basques

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

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

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

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

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

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

將 DOM 節點儲存為全域變數

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

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

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

您也可以在「DOM Tree」中的節點上按一下滑鼠右鍵，然後選取「Store as 全域變數」。

以全域變數的形式儲存在 DOM 樹狀結構中。

圖 3：以全域變數的形式儲存在 DOM 樹狀結構中

發起人與優先順序資訊現在都可使用 HAR 匯入和匯出功能

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

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

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

如要將檔案重新匯入「網路」面板，請直接拖曳檔案。

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

_initiator 欄位會針對導致要求資源的原因提供更多背景資訊。這會對應至「要求」資料表中的「Initiator」欄。

「發起人」欄。

圖 9. 「發起人」欄

您也可以按住 Shift 鍵，將滑鼠遊標懸停在要求上，查看要求的啟動者和依附元件。

查看啟動條件和依附元件。

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

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

優先順序欄。

圖 11. 優先順序欄

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

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

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

從主選單存取指令選單

透過「指令選單」快速存取開發人員工具面板、分頁和功能。

指令選單。

圖 13. 指令選單

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

從主選單開啟「指令」選單。

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

子母畫面中斷點

子母畫面是新的實驗性 API，可讓網頁在電腦上建立浮動式影片縮圖。

在事件監聽器中斷點窗格中啟用 enterpictureinpicture、leavepictureinpicture 和 resize 核取方塊，以便在其中一個子母畫面事件觸發時暫停。開發人員工具會在處理常式的第一行暫停。

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

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

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

假設您想在聚焦按鈕並按下 R、E 和 D 後在按鈕周圍加上紅色邊框，但卻不知道該新增事件監聽器哪些事件。使用 monitorEvents() 將所有元素的事件記錄到控制台。

  1. 取得節點的參照。

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

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

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

    將節點傳送至監控事件()。

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

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

    控制台中的節點事件。

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

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

unmonitorEvents(temp1);

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

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

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

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

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59