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

Kayce Basques

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

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

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

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

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

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

將 DOM 節點儲存為全域變數

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

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

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

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

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

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

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

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

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

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

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

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

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

發起者欄。

圖 9. 發起者欄

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

查看啟動者和依附元件。

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

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

「優先順序」欄。

圖 11. 「優先順序」欄

在「Request」(要求) 表格的標頭上按一下滑鼠右鍵，然後選取「Priority」(優先順序) 以顯示「Priority」(優先順序) 欄。

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

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

從主選單存取指令選單

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

命令選單。

圖 13. 指令選單

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

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

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

子母畫面中斷點

「子母畫面」是新的實驗性 API，可讓頁面在電腦上建立浮動影片視窗。

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

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

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

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

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

  1. 取得節點的參照。

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

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

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

    將節點傳送至 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 影片留言。

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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