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

Kayce Basques

開發人員工具為 Chrome 66 版的最新功能與重大異動包括：

，瞭解如何調查及移除這項存取權。

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

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

「網路」面板中的「Initiator」欄會顯示要求資源的原因。適用對象 舉例來說，如果 JavaScript 導致系統擷取到圖片，「Initiator」欄會顯示一行 引發請求的 JavaScript 程式碼。

先前，如果您的架構會將網路要求包裝在包裝函式中，則「Initiator」資料欄 沒有太大幫助所有網路要求都指向同一行包裝函式程式碼，

在這個情境中，您真正想要的就是查看發出請求的應用程式程式碼。提示詞 新功能：

  1. 將滑鼠遊標懸停在「發起者」欄。造成要求的呼叫堆疊會顯示在彈出式視窗中。
  2. 對要在發起人結果中隱藏的通話按一下滑鼠右鍵。
  3. 選取「將指令碼新增到忽略清單」。「Initiator」欄現在會隱藏指令碼中， 您已忽略。

正在忽略「requests.js」。

圖 1. 正在忽略 requests.js

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

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

在「預覽」和「回應」分頁中進行美化排版

根據預設，「網路」面板中的「預覽」分頁現在會在偵測到資源時提供美化資源。 因為這些資源已經壓縮

「Preview」分頁預設會美化 analytics.js 的內容。

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

如要查看資源的未修訂版本，請使用「Response」分頁。您也可以 從「Response」分頁中透過新的「Format」按鈕快速列印資源。

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

圖 3. 透過「Format」按鈕手動列印 analytics.js 的內容

在預覽分頁中預覽 HTML 內容

過去，「網路」面板中的「預覽」分頁會顯示 在某些情境下呈現 HTML 的預覽畫面現在一律開啟「預覽」分頁 執行 HTML 的基本轉譯作業這並不是完整的瀏覽器，因此可能無法顯示 完全下載 HTML 程式碼如要查看 HTML 程式碼，請按一下「回應」分頁，或是 在資源上按一下滑鼠右鍵，然後選取「在來源面板中開啟」。

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

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

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

在「裝置模式」中，開啟「縮放」下拉式選單並選取「自動調整縮放」，即可 每當您改變裝置螢幕方向時，就會自動調整可視區域的大小。

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

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

HTML 中定義的樣式範例

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

在 Chrome 65 中，如果您是透過開發人員工具的「Style」窗格變更 font-weight 宣告，例如「Local」 覆寫值不會追蹤變更。換句話說，下次重新載入時，樣式就會還原 返回「font-weight: bold」。不過，在 Chrome 66 中，這類變更現在不會因網頁載入而改變。

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

我在製作「開始使用 JavaScript 偵錯」影片時，有些觀眾留言 ，如果應用程式以架構為基礎建構而成，事件監聽器的中斷點就不大有用，因為 事件監聽器通常包含在架構程式碼中。例如，在圖 8 中，我設定了 click 工具中斷點點選示範中的按鈕後，開發人員工具就會在 接聽程式程式碼的第一行在本範例中，它會在 Vue.js 的包裝函式程式碼的第 1802 行中暫停， 沒有太大幫助

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

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

由於 Vue.js 指令碼位於單獨的檔案，我可以忽略呼叫堆疊中的該指令碼 窗格，確定這個 click 中斷點更加實用。

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

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

下次我點選按鈕並觸發 click 中斷點時，就會執行 Vue.js 程式碼 不會暫停，然後暫停應用程式事件監聽器中第一行程式碼， 我真的想暫停一下

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

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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