Chrome 開發人員工具最近新增了許多功能,有些功能較小,有些則較大。我們將從元素面板的更新開始談起,接著討論控制台、時間軸等其他主題。
將停用的樣式規則複製為註解
複製樣式窗格中的完整 CSS 規則時,現在會包含已關閉的樣式,這些樣式會以註解形式存在剪貼簿中。[crbug.com/316532]
複製為 CSS 路徑
「Copy as CSS path」現在可做為「元素」面板中 DOM 節點的選單項目 (類似「Copy XPath」選單項目)。

產生 CSS 選取器不必侷限於樣式表/JavaScript,也可以是 WebDriver 測試中定位器策略的替代方案。[crbug.com/277286]
查看 Shadow DOM 元素樣式
陰影根的子元素現在可以檢查樣式。[crbug.com/279390]
控制台的 copy() 可用於物件
指令列 API 的 copy() 方法現在可用於物件。請試著將 copy({foo:'bar'})
放入「控制台」面板,看看剪貼簿中是否有字串化且已格式化的物件。[crbug.com/289348]
主控台的規則運算式篩選器
在控制台面板中使用規則運算式篩選控制台訊息。crbug.com/318308]
輕鬆移除事件監聽器
請試著在控制台面板中使用 getEventListeners(document).mousewheel[0];
,擷取文件中第一個滑鼠滾輪事件監聽器。接著,請嘗試使用 $_.remove()
移除該事件監聽器 ($_
= 最近評估的運算式值)。crbug.com/309524]
移除 CSS 警告
您可能會看到的「無效的 CSS 屬性值」類型警告現已移除。我們會持續努力,讓實作方式更能應對真實世界的 CSS,包括瀏覽器駭客攻擊。crbug.com/309982]
時間軸作業在圓餅圖中匯總

時間軸面板現在在「詳細資料」窗格中包含圓餅圖,以視覺化方式顯示轉譯成本的來源,協助您一目瞭然地找出瓶頸。
您會發現,過去在彈出式視窗中顯示的大部分資訊,現在都已移至專屬窗格。如要查看,請開始錄製時間軸並選取影格,然後注意包含圓餅圖的新「Details」(詳細資料) 窗格。在「影格」檢視畫面中,您可以查看所選影格的精彩統計資料,例如平均 FPS (1000ms/frame duration
)。[crbug.com/247786]
圖片大小調整事件詳細資料
時間軸面板中的圖片重新調整大小和解碼事件,現在會包含「元素」面板中 DOM 節點的連結。

圖片網址連結會將您導向「資源」面板中的對應資源。crbug.com/244159]
GPU 影格
在 GPU 上發生的框架現在會顯示在頂端,也就是主執行緒的框架上方。crbug.com/305863]
在 popstate 事件監聽器中中斷
'popstate' 現已可用於「來源」面板側欄中的事件監聽器中斷點。[crbug.com/88112]
可在側欄中使用的轉譯設定
開啟抽屜後,畫面會顯示多個窗格,其中一個是「算繪」面板,可用於顯示繪圖矩形、FPS 計量器等。這個功能預設為啟用,您可以前往「設定」>「在主控台抽屜中顯示『算繪』檢視畫面」開啟。
將圖片複製為資料網址

資源面板中的圖片素材資源現在可以將內容複製為資料 URI (data:image/png;base64,iVBO...
)。
如要試用這項功能,請在「Frames」>「[Resource]」>「Images」中找出圖片資源,然後在圖片預覽畫面上按一下滑鼠右鍵,存取內容選單,再選取「Copy Image as Data URL」(以資料網址複製圖片)。crbug.com/321132]
資料 URI 篩選
如果你從未將這些檔案歸類為網路資源,現在可以從「Network」分頁中篩除資料 URI。選取「篩選器」圖示


修正網路時間錯誤
如果您發現圖片下載時間長達 300,000 年,我們深感抱歉。;) 這些網路資源的錯誤時間已修正。crbug.com/309570]
網路錄製行為可提供更多控管選項
錄製網路的行為略有不同。首先,錄製按鈕的運作方式與時間軸或 CPU 設定檔相同。如您所料,如果在開發人員工具開啟的情況下重新載入網頁,系統會自動開始網路記錄。接著就會關閉,因此如果您想在網頁載入後擷取網路活動,請將其開啟。這樣一來,您就能更輕鬆地以視覺化方式呈現瀑布圖,而不會因為網路要求延遲而導致結果偏差。crbug.com/325878]
開發人員工具主題現可透過擴充功能使用
使用者樣式表現在可透過開發人員工具實驗 (勾選方塊:「允許自訂 UI 主題」) 使用,這可讓 Chrome 擴充功能將自訂樣式套用至開發人員工具。如需範例,請參閱「Sample DevTools Theme Extension」crbug.com/318566]
本期開發人員工具摘要就到這裡。如果您尚未閱讀,請參閱11 月的摘要。