2013 年 12 月開發人員工具摘要

Umar Hansa
Umar Hansa

Chrome 開發人員工具最近新增了許多功能,有些功能較小,有些則較大。我們將從元素面板的更新開始談起,接著討論控制台、時間軸等其他主題。

將停用的樣式規則複製為註解

複製樣式窗格中的完整 CSS 規則時,現在會包含已關閉的樣式,這些樣式會以註解形式存在剪貼簿中。[crbug.com/316532]

複製為 CSS 路徑

「Copy as CSS path」現在可做為「元素」面板中 DOM 節點的選單項目 (類似「Copy XPath」選單項目)。

複製 CSS 路徑。

產生 CSS 選取器不必侷限於樣式表/JavaScript,也可以是 WebDriver 測試中定位器策略的替代方案。[crbug.com/277286]

查看 Shadow DOM 元素樣式

陰影根的子元素現在可以檢查樣式。[crbug.com/279390]

控制台的 copy() 可用於物件

指令列 APIcopy() 方法現在可用於物件。請試著將 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。選取「篩選器」圖示

篩選器圖示
查看其他資源篩選器類型。crbug.com/313845]

資料 URI 篩選

修正網路時間錯誤

如果您發現圖片下載時間長達 300,000 年,我們深感抱歉。;) 這些網路資源的錯誤時間已修正。crbug.com/309570]

網路錄製行為可提供更多控管選項

錄製網路的行為略有不同。首先,錄製按鈕的運作方式與時間軸或 CPU 設定檔相同。如您所料,如果在開發人員工具開啟的情況下重新載入網頁,系統會自動開始網路記錄。接著就會關閉,因此如果您想在網頁載入後擷取網路活動,請將其開啟。這樣一來,您就能更輕鬆地以視覺化方式呈現瀑布圖,而不會因為網路要求延遲而導致結果偏差。crbug.com/325878]

開發人員工具主題現可透過擴充功能使用

使用者樣式表現在可透過開發人員工具實驗 (勾選方塊:「允許自訂 UI 主題」) 使用,這可讓 Chrome 擴充功能將自訂樣式套用至開發人員工具。如需範例,請參閱「Sample DevTools Theme Extensioncrbug.com/318566]

本期開發人員工具摘要就到這裡。如果您尚未閱讀,請參閱11 月的摘要。