開發人員工具摘要:分頁重新排序、管理主控台 2 和架構事件事件監聽器

Paul Bakaus
Paul Bakaus

重新排序最適合您的 DevTools 分頁,查看架構事件的確切繫結位置,並封鎖網路要求,瞭解哪些第三方指令碼會造成速度變慢。

更優異的面板導覽:#2 控制台、分頁重新排序和實用的底線

調查開發人員工具的哪些部分使用率最高後,全螢幕控制檯面板可以省去主要分頁列的最後位置。由於這是次常用的面板,現在已成為第二個分頁。這在較低解析度上特別重要,因為我們無法一次顯示所有分頁。

不過,我們瞭解。經典順序是肌肉記憶力的一部分,你會有一陣子感到暈眩。或者,您可能只是不喜歡全螢幕控制台!別擔心,我們會提供協助。您現在可以拖曳分頁來重新排序,如下所示:

您對分頁列所做的變更會保留,並且適用於原生分頁和擴充功能提供的分頁。另外,我們也加入了流暢的動畫底線。因為我們就是這麼好。

支援架構事件監聽器

使用 DevTools 時,JS 架構 (例如 jQuery) 所建立的事件有時可能會令人困擾。這是因為大多數架構會將原生 DOM 事件包裝至自訂事件 API,因此查看事件監聽器並不會顯示太多相關資訊:

關閉架構事件監聽器

不過,您可以透過「事件監聽器」分頁中的全新「架構監聽器」選項,讓 DevTools 瞭解架構包裝部分,並自動解決該部分。如今,由架構繫結的事件外觀和行為與原生事件完全相同,可讓您瞭解實際繫結的位置:

啟用架構監聽器

其他最佳

  • 自訂物件格式設定器允許 CoffeeScript 等轉譯語言,在開發人員工具控制台中為物件設定最佳格式
  • 錄製期間,時間軸會顯示全新的對話方塊,讓你一目瞭然地掌握狀態、時間和緩衝區使用情形。

    時間軸提示。
  • 同樣地,Network 面板現在會在空白時顯示實用的提示:

    網路提示。
  • 您現在可以使用篩選輸入內容,並將其設為 mixed-content:displayed,在網路面板中篩選混合內容


和往常一樣,歡迎透過 Twitter 與我們分享您的想法或在下方留言,並將錯誤提交至 crbug.com/new

我們下個月見! Paul Bakaus 和開發人員工具團隊