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

Kayce Basques

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

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

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

「Network」面板中的「Initiator」欄會顯示要求資源的原因。舉例來說，如果 JavaScript 導致擷取圖片，系統會在「Initiator」欄中顯示導致要求的 JavaScript 程式碼行。

先前，如果您的架構在包裝函式中包裝網路要求，發起者欄就不會那麼有用。所有網路要求都會指向同一個包裝函式程式碼行。

在這種情況下，您真正需要的是查看導致要求的應用程式程式碼。這項功能現已推出：

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

忽略「requests.js」。

圖 1. 忽略 requests.js

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

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

在「預覽」和「回覆」分頁中顯示漂亮的輸出內容

「Network」面板中的「Preview」分頁現在會在偵測到資源已經過精簡時，預設以美觀的格式顯示資源。

預覽分頁會預設以美化格式列印 analytics.js 的內容。

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

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

透過「格式」按鈕手動美化 analytics.js 的內容。

圖 3. 透過「格式」按鈕，手動顯示 analytics.js 的內容

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

先前，在特定情況下，「Network」面板中的「Preview」分頁會顯示 HTML 資源的程式碼，在其他情況下則會轉譯 HTML 的預覽畫面。「Preview」分頁現在會一律對 HTML 進行基本算繪。這並非完整的瀏覽器，因此可能無法按照預期顯示 HTML。如要查看 HTML 程式碼，請按一下「Response」分頁，或在資源上按一下滑鼠右鍵，然後選取「Open in Sources panel」。

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

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

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

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

本地覆寫功能現在可搭配 HTML 中定義的部分樣式運作

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

HTML 中定義的樣式範例

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

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

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

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

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

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

由於 Vue.js 指令碼位於個別檔案中，因此我可以忽略 Call Stack 窗格中的該指令碼，讓這個 click 中斷點更實用。

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

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

下次我按一下按鈕並觸發 click 中斷點時，它會執行 Vue.js 程式碼，但不會在其中暫停，然後會在應用程式事件監聽器的第一行程式碼上暫停，這是我一直想暫停的地方。

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

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

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。