Chrome 開發人員工具最近推出了許多更新的功能,包括一些大小更小、規模更大的功能。我們會先介紹元素面板更新內容,接著介紹控制台、時間軸等。
停用的樣式規則複製已加上註解
在「Styles」窗格中複製整個 CSS 規則時,系統會加入關閉的樣式,這些規則會寫在剪貼簿中,做為註解。[crbug.com/316532]
複製為 CSS 路徑
「元素複製為 CSS 路徑」現已成為「元素」面板中 DOM 節點的選單項目 (類似「複製 XPath」選單項目)。

產生 CSS 選取器並不受限於樣式表/JavaScript,它也可以做為 WebDriver 測試中的定位器策略替代方案。[crbug.com/277286]
查看陰影 DOM 元素樣式
陰影根的子項元素現在可以檢查其樣式。[crbug.com/279390]
控制台的 copy() 適用於物件
Command Line 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]
以圓餅圖呈現時間軸運算結果

時間軸面板現在會在「詳細資料」窗格中提供圓餅圖,並以圖表呈現算繪費用的來源,方便您快速找出瓶頸。
您會發現許多原本顯示在彈出式視窗中的資訊,現在都已升級為專屬的窗格。如要查看,請開始時間軸記錄並選取影格,請記下內含圓餅圖的新「詳細資料」窗格。進入「影格」檢視畫面時,你可以取得特定影格的平均每秒影格數 (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。選取篩選器圖示


修正網路時間錯誤
如果您發現圖像的下載時間明顯是 30 萬年,我們對此深感抱歉。;) 錯誤顯示網路資源的時間錯誤。crbug.com/309570]
網路錄影行為握有更大的掌控權
錄影網路的行為略有不同。首先,錄製按鈕的運作方式與時間軸或 CPU 設定檔相同。正如您所預期,如果您在開發人員工具開啟的狀態下重新載入頁面,系統會自動開始網路錄影。這項功能會關閉,因此如果想在網頁載入後擷取網路活動,請啟用這項功能。如此一來,無論發生中斷的網路要求,都能更輕鬆地視覺化您的刊登序列,而不會使結果出現偏差。crbug.com/325878]
開發人員工具主題現可透過擴充功能使用
使用者現在可以透過開發人員工具的實驗功能 (核取方塊:「允許自訂 UI 主題」) 存取使用者樣式表,方便 Chrome 擴充功能將自訂樣式套用至開發人員工具。如需範例,請參閱「開發人員工具主題擴充功能範例」。crbug.com/318566]
這份開發人員工具摘要的介紹到此告一段落。如果尚未收到,請試試 11 月版本。