Chrome 66 開發者工具新特性介紹

西樓聽雨發表於2018-02-28

原文連結： developers.google.com/web/updates…

編者注：

本文對是對Google開發者網站釋出的關於“Chrome 66中開發者工具新特性介紹”的轉譯（非純翻譯）

如果你想體驗這些特性，需要安裝相應的Chrome的Canary通道版本。

來自原作者 Kayce Basques 的提醒：本次更新的視訊介紹版本，將在2018年4月中旬釋出。

Network 皮膚中加入了“列入黑盒（Blackboxing）”功能

我們都知道，Network皮膚中的請求列表中有一個“發起者（Initiator）”列，該列會給出資源被請求的原因。例如，某段Javascript程式碼發起了一個圖片請求，那麼“發起者”列將會給出發起該請求的程式碼所在的檔案及其行號。

提示: 右鍵點選列表的表頭可以顯示/隱藏指定的列。

這個特性非常棒，但是這有一個問題：假如所有的請求都是通過呼叫框架中封裝好的介面發起的，那麼該列其實就沒什麼用了，因為所有的請求都指向框架中的同一行程式碼，以下圖為例：

上圖中，“發起者”列顯示所有的請求的“發起者”都在request.js中的弟2行。

這並不是我們想要的，我們真正想知道的是發起請求的應用層程式碼的資訊，這次的更新就可以滿足這種場景，步驟是：

將游標懸停在“發起者”列上，在浮出的氣泡中，會顯示發起這次請求的呼叫棧。
右擊你希望從“發起者”資訊中隱藏的呼叫。
選擇“列入黑盒指令碼（Blackbox script）”。現在，“發起者”列將隱藏所有來自這個指令碼的呼叫。

上圖中，我們將request.js列入了黑盒指令碼，來看下效果：

現在，“發起者”顯示的資訊就變得非常有用了。

提示

可在設定(Settings)中的“黑盒(Blockboxing)”標籤頁中管理你的“黑盒指令碼列表”。

更多關於“列入黑盒”功能的介紹，可檢視《如何忽略某個指令碼或符合某種規則的一系列指令碼（Ignore a script or pattern of scripts）》。

預覽(Preview)標籤和響應(Response)標籤中的“美化顯示”功能

現在，Network皮膚中的Preview標籤頁如果檢測到了資源是經緊縮(minified)的，則預設會對資源進行美化顯示(Pretty-printing)。

如果要檢視未緊縮(unminified)過的版本，可以切換至響應(Response)標籤。在Response標籤頁中，同樣你可以開啟美化顯示效果，點選左下角新加入的格式化(Format)功能按鈕即可。

預覽標籤頁支援預覽HTML內容

對於HTML資源，在本次更新之前的版本里，預覽(Preview)標籤在某些情況下顯示的是HTML的原始碼。而現在，預覽標籤顯示的總是對HTML進行基礎渲染過後的效果。因為這個特性的目的並不是用來檢視實際效果的，所以顯示出來的可能與真實瀏覽器視窗中顯示的有些許出入。如果你想檢視HTML程式碼，需要切換至響應(Response)標籤頁，也可以右擊資源（請求列表），在彈出選單中選擇“在原始碼皮膚中開啟(Open In Sources panel)”。

裝置模式支援自動調整縮放比例

當“裝置模式(Device Mode)”啟用後，開啟“縮放比例（Zoom）”下拉選單，選擇“自動調整（Auto-adjust）縮放”，這樣，當你改變裝置的持拿方向時，視窗的大小會自動調整，以此保證頁面的縮放效果。（編者注：該處可能轉譯不到位，請讀者留意，原文如下）

When in Device Mode, open the Zoom dropdown and select Auto-adjust zoom to automatically resize the viewport whenever you change device orientation.

視訊演示（需越牆）：www.youtube.com/watch?v=OCX…

本地覆蓋(Local Overrides)功能現在支援HTML內的樣式

在Chrome 65首次引入“本地覆蓋(Local Overrides)”功能時候，還無法跟蹤定義在HTML內的樣式改動。以下圖舉例：圖中顯示，在文件中宣告瞭一個設定h1的字型為粗體的樣式規則。

在Chrome 65中，如果你通過樣式（Styles)皮膚修改了這個font-weight的宣告，本地覆蓋功能並不會發現到這個修改。換言之，如果你再次過載這個頁面，像這類的修改就並不會生效。

注意：本地覆蓋功能能跟蹤到這類修改的前提是這些樣式必須是事先定義在HTML文件中的，那些通過指令碼動態新增到 HTML文件上的樣式，本地覆蓋功能還跟蹤不到。

題外提示：將框架指令碼列入黑盒指令碼來讓事件斷點變得有用

在我釋出Javascript調式入門(Get Started With Debugging JavaScript)視訊後，一些觀看的朋友在評論中指出事件斷點在基於框架之上開發的應用中並沒有沒什麼幫助，因為事件監聽器通常會被框架包裝起來。例如，在下圖中，我設定了一個單擊事件的斷點，當我單擊圖中的按鈕後，開發者工具會自動將JS的執行暫停在監聽函式程式碼第一行所在位置，這個例子中，暫停在了Vue.js的內部程式碼中的第1802行，顯然這對我們是沒有什麼幫助。