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

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

請繼續閱讀,或觀看下方版本資訊的影片版本。

忽略「網路」面板中的指令碼

「網路」面板的「提出者」欄會指出要求資源的原因。舉例來說,如果 JavaScript 會導致系統擷取圖片,「Initiator」欄會顯示造成要求的 JavaScript 程式碼行。

在此之前,如果您的架構已將網路要求包裝在包裝函式中,「Initiator」欄就不會幫助使用者。所有指向同一行包裝函式程式碼的網路要求。

在這個情況下,真正需要查看的是造成要求的應用程式程式碼。這樣可以:

  1. 將滑鼠遊標懸停在「Initiator」欄上。導致要求的呼叫堆疊顯示在彈出式視窗中。
  2. 在發起器結果中隱藏的呼叫上按一下滑鼠右鍵。
  3. 選取「將指令碼新增到忽略清單」。「Initiator」欄現在會隱藏您略過指令碼的所有呼叫。

正在忽略「requests.js」。

圖 1:正在忽略 requests.js

您可以在「設定」的「忽略清單」分頁中管理忽略的指令碼。

請參閱「忽略指令碼或指令碼模式」,進一步瞭解如何忽略指令碼。

「預覽」和「回應」分頁中的美化排版功能

現在,當「Network」(網路) 面板中的「Preview」(預覽) 分頁偵測到資源已被壓縮時,預設會美化資源。

根據預設,「預覽」分頁會美化 analytics.js 的內容。

圖 2:根據預設,「Preview」分頁會美化 analytics.js 的內容

如要查看資源的未壓縮版本,請使用「Response」分頁。您也可以透過「Response」分頁,使用新的「Format」按鈕手動列印資源。

使用「格式」按鈕手動美化 analytics.js 內容。

圖 3:使用「Format」(格式) 按鈕手動列印 analytics.js 內容

在預覽分頁中預覽 HTML 內容

以往,「Network」面板中的「Preview」分頁會在特定情況下顯示 HTML 資源的程式碼,而在其他情況下則顯示 HTML 的預覽畫面。「Preview」分頁現在一律會執行 HTML 基本算繪作業。這並不是完整瀏覽器,因此可能無法完全如預期顯示 HTML。如要查看 HTML 程式碼,請按一下「Response」分頁標籤,或在資源上按一下滑鼠右鍵,然後選取「Open in SourcePanel」

在「預覽」分頁中預覽 HTML。

圖 4 在「預覽」分頁中預覽 HTML

在裝置模式中自動調整縮放功能

「Device Mode」(裝置模式) 中開啟「Zoom」下拉式選單,然後選取「Auto-調整 zoom」,即可在裝置螢幕方向變更時,自動調整可視區域的大小。

本機覆寫現在可搭配 HTML 中定義的部分樣式

開發人員工具在 Chrome 65 版中啟動本機覆寫時,有一項限制是無法追蹤 HTML 中定義的樣式變更。例如,在圖 7 中,文件 head 有樣式規則,針對 h1 元素宣告 font-weight: bold

HTML 中定義的樣式範例

圖 5:HTML 中定義的樣式範例

在 Chrome 65 版中,如果您是透過開發人員工具的「樣式」窗格變更 font-weight 宣告,本機覆寫不會追蹤變更。換句話說,下次重新載入時,樣式會還原為 font-weight: bold。不過在 Chrome 66 版中,這類變更現在會在載入網頁時持續更新。

額外訣竅:忽略架構指令碼,讓事件監聽器中斷點更實用

以前,我建立開始使用偵錯 JavaScript 影片時,有些觀眾認為事件監聽器中斷點對建構在架構上的應用程式並不實用,因為事件監聽器通常包含在架構程式碼中。例如,在圖 8 中,我已經在開發人員工具中設定 click 中斷點。點選示範中的按鈕後,開發人員工具會自動暫停事件監聽器程式碼的第一行。在本例中,它在 Vue.js 的包裝函式程式碼在第 1802 行中暫停,但這樣並不實用。

點擊中斷點在 Vue.js 的包裝函式程式碼中暫停。

圖 6click 中斷點在 Vue.js 的包裝函式程式碼中暫停

由於 Vue.js 指令碼位於獨立檔案中,因此我可以忽略呼叫堆疊窗格中的指令碼,讓這個 click 中斷點更加實用。

從「Call Stack」窗格中忽略 Vue.js 指令碼。

圖 7. 從「Call Stack」窗格中忽略 Vue.js 指令碼

下次我點選按鈕並觸發 click 中斷點時,它會在不暫停的情況下執行 Vue.js 程式碼,然後暫停應用程式事件監聽器的第一行程式碼,也就是我真正想要暫停這一行的程式碼。

點擊中斷點現在會暫停在應用程式事件監聽器程式碼中。

圖 8. click 中斷點現在會在應用程式的事件監聽器程式碼中暫停

下載預覽管道

考慮使用 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