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

Umar Hansa
Umar Hansa

Chrome 開發人員工具最近推出了許多更新的功能,包括一些大小更小、規模更大的功能。我們會先介紹元素面板更新內容,接著介紹控制台、時間軸等。

停用的樣式規則複製已加上註解

在「Styles」窗格中複製整個 CSS 規則時,系統會加入關閉的樣式,這些規則會寫在剪貼簿中,做為註解。[crbug.com/316532]

複製為 CSS 路徑

「元素複製為 CSS 路徑」現已成為「元素」面板中 DOM 節點的選單項目 (類似「複製 XPath」選單項目)。

複製 CSS 路徑。

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

查看陰影 DOM 元素樣式

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

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

Command Line APIcopy() 方法可用於物件請嘗試在控制檯面板中使用 copy({foo:'bar'}),您會發現剪貼簿中物件已字串化和格式化版本。[crbug.com/289348]

控制台的規則運算式篩選器

在控制檯面板中使用規則運算式篩選控制台訊息。crbug.com/318308]

輕鬆移除事件監聽器

請嘗試在控制檯面板中使用 getEventListeners(document).mousewheel[0];,以擷取文件上的第一個滑鼠滾輪事件監聽器。因此,請嘗試使用 $_.remove();如要移除該事件監聽器 ($_ = 最近評估運算式的值)。crbug.com/309524]

移除 CSS 警告

先前您可能看到的「CSS 屬性值無效」樣式警告現已移除。我們持續致力於讓各種真實 CSS 的實作更加完善,包括瀏覽器駭客攻擊。crbug.com/309982]

以圓餅圖呈現時間軸運算結果

時間軸操作圖表

時間軸面板現在會在「詳細資料」窗格中提供圓餅圖,並以圖表呈現算繪費用的來源,方便您快速找出瓶頸。

您會發現許多原本顯示在彈出式視窗中的資訊,現在都已升級為專屬的窗格。如要查看,請開始時間軸記錄並選取影格,請記下內含圓餅圖的新「詳細資料」窗格。進入「影格」檢視畫面時,你可以取得特定影格的平均每秒影格數 (1000ms/frame duration) 等有趣的統計資料。[crbug.com/247786]

圖片大小調整事件詳細資料

在時間軸面板中,圖片大小調整和解碼事件現在會包含「元素」面板中 DOM 節點的連結。

圖片大小詳細資料

點選 [圖片網址] 連結,即可前往「資源」面板對應的資源。crbug.com/244159]

GPU 影格

發生在 GPU 的影格現在會顯示在主執行緒的頂端 (位於頂端)。crbug.com/305863]

告別流行樂聽眾

「popstate」現已在「來源」面板側欄做為事件監聽器中斷點使用。[crbug.com/88112]

導覽匣中可用的轉譯設定

開啟導覽匣現在會顯示一些窗格 (其中一個窗格為轉譯面板),用於顯示繪製矩形、每秒影格數計等項目。系統預設會在「設定」>「在主控台導覽匣中顯示「轉譯」檢視畫面」啟用這項功能

複製圖片做為資料網址

複製圖片做為資料網址

「資源」面板中的圖片素材資源現在能以資料 URI (data:image/png;base64,iVBO...) 形式複製內容。

如要試用這項功能,請在 [頁框] > [資源] > [圖片] 中找到圖片資源,在圖片預覽畫面上按一下滑鼠右鍵,開啟內容選單,然後選取 [複製圖片為資料網址]。crbug.com/321132]

資料 URI 篩選

如果不知道這些 URI 屬於何處,現在可以從「網路」分頁中篩除資料 URI。選取篩選器圖示

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

資料 URI 篩選

修正網路時間錯誤

如果您發現圖像的下載時間明顯是 30 萬年,我們對此深感抱歉。;) 錯誤顯示網路資源的時間錯誤。crbug.com/309570]

網路錄影行為握有更大的掌控權

錄影網路的行為略有不同。首先,錄製按鈕的運作方式與時間軸或 CPU 設定檔相同。正如您所預期,如果您在開發人員工具開啟的狀態下重新載入頁面,系統會自動開始網路錄影。這項功能會關閉,因此如果想在網頁載入後擷取網路活動,請啟用這項功能。如此一來,無論發生中斷的網路要求,都能更輕鬆地視覺化您的刊登序列,而不會使結果出現偏差。crbug.com/325878]

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

使用者現在可以透過開發人員工具的實驗功能 (核取方塊:「允許自訂 UI 主題」) 存取使用者樣式表,方便 Chrome 擴充功能將自訂樣式套用至開發人員工具。如需範例,請參閱「開發人員工具主題擴充功能範例」。crbug.com/318566]

這份開發人員工具摘要的介紹到此告一段落。如果尚未收到,請試試 11 月版本。