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

Kayce Basques

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

• 忽略「網路」面板中的指令碼
• 在裝置模式中自動調整縮放比例
• 在「預覽」和「回應」分頁中進行美化列印
• 在「預覽」分頁中預覽 HTML 內容
• 本機覆寫，樣式位於 HTML 內

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

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

「網路」面板中的「發起者」欄會說明要求資源的原因。舉例來說，如果 JavaScript 導致系統擷取圖片，發起者欄會顯示導致要求發生的 JavaScript 程式碼行。

先前，如果架構將網路要求包裝在包裝函式中，啟動器欄就不太實用。所有網路要求都指向同一行包裝函式程式碼。

在這種情況下，您真正想查看的是導致要求的應用程式程式碼。現在可以這麼做：

1. 將游標懸停在「發起者」欄上。彈出式視窗會顯示導致要求的呼叫堆疊。
2. 在要從發起者結果中隱藏的通話上按一下滑鼠右鍵。
3. 選取「將指令碼新增至忽略清單」。「發起者」資料欄現在會隱藏您忽略的指令碼中的任何呼叫。

圖 1. 忽略「requests.js」

如要管理忽略的指令碼，請前往「設定」的「忽略清單」分頁。

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

在「預覽」和「回應」分頁中以美觀格式列印

現在，當「網路」面板的「預覽」分頁偵測到資源已縮排時，預設會美化列印資源。

圖 2. 「預覽」分頁標籤預設會以美觀格式列印 analytics.js 的內容

如要查看資源的未縮排版本，請使用「回應」分頁標籤。您也可以透過新的「格式」按鈕，從「回應」分頁手動美化列印資源。

圖 3. 透過「格式」按鈕，手動以美觀格式列印 analytics.js 的內容

在「預覽」分頁中預覽 HTML 內容

先前，「網路」面板的「預覽」分頁在某些情況下會顯示 HTML 資源的程式碼，在其他情況下則會顯示 HTML 的預覽畫面。「預覽」分頁現在一律會基本算繪 HTML。這並非完整瀏覽器，因此顯示的 HTML 可能與預期不符。如要查看 HTML 程式碼，請按一下「回應」分頁標籤，或在資源上按一下滑鼠右鍵，然後選取「在來源面板中開啟」。

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

在裝置模式中自動調整縮放比例

在裝置模式下，開啟「縮放」下拉式選單，然後選取「自動調整縮放比例」，即可在變更裝置方向時自動調整可視區域大小。

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

在 Chrome 65 中推出「開發人員工具」本機覆寫功能時，其中一項限制是無法追蹤 HTML 中定義的樣式變更。舉例來說，在圖 7 中，文件 head 的 head 內有樣式規則，會為 h1 元素宣告 font-weight: bold。

圖 5：在 HTML 中定義樣式的範例

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

額外提示：忽略架構指令碼，讓事件監聽器中斷點更實用

在製作「開始偵錯 JavaScript」影片時，有觀眾留言表示，事件監聽器中斷點不適用於以架構為基礎建構的應用程式，因為事件監聽器通常會包裝在架構程式碼中。舉例來說，在圖 8 中，我已在開發人員工具中設定 click 中斷點。點選示範中的按鈕時，開發人員工具會自動在監聽器程式碼的第一行暫停。在這個例子中，系統會在第 1802 行的 Vue.js 包裝函式程式碼中暫停，這並無太大幫助。

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

由於 Vue.js 指令碼位於個別檔案中，因此我可以從「呼叫堆疊」窗格忽略該指令碼，讓這個 click 中斷點更加實用。

圖 7. 忽略「Call Stack」(呼叫堆疊) 窗格中的 Vue.js 指令碼

下次我點選按鈕並觸發 click 中斷點時，系統會執行 Vue.js 程式碼，但不會暫停，然後會在應用程式監聽器的第一行程式碼上暫停，這正是我一直想暫停的位置。

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

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

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

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

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