開發人員工具的新功能 (Chrome 58)

凱斯巴斯克
Kayce Basques

歡迎閱讀開發人員工具版本資訊的第一期內容!從現在起,當您首次開啟 Chrome 新版本時,開發人員工具會開啟「新功能」導覽匣,並提供該版本的版本資訊連結。

重點特色

  • 時間軸面板已重新命名為「成效」面板。
  • 「Profile」面板已重新命名為「Memory」面板。
  • Cookie 值現已開放編輯。
  • 開發人員工具現在會在發生記憶體不足錯誤之前自動暫停。

全新功能

可編輯 Cookie

在「Cookie」分頁的儲存格上按兩下,即可編輯相應的值。

編輯 Cookie。
圖 1. 編輯 Cookie

感謝 kdzwinel 的貢獻!

在「Styles」窗格中,可檢查和可編輯的 CSS 變數

您現在可以在樣式窗格中檢查及編輯 CSS 變數。如要親自試用,請參閱 CSS 變數示範

記憶體不足的中斷點

如果應用程式在短時間內配置大量記憶體,開發人員工具現在會自動暫停並增加堆積限制。這可讓您檢查堆積、在主控台中執行指令釋出記憶體,並繼續對問題進行偵錯。詳情請參閱 Chrome 的一個小步驟,一個巨型堆積在 V8 裝置上

已在記憶體不足中斷點暫停
圖 2. 已在記憶體不足中斷點上暫停

建立畫布的中斷點

現在,您可以建立事件監聽器中斷點,每當建立新的畫布結構定義時就會觸發。

透過「事件監聽器中斷點」窗格中的「建立畫布內容」核取方塊,建立畫佈建立中斷點
圖 3. 透過「Event Listener Breakpoints」窗格中的「Create Canvas context」(建立畫布內容) 核取方塊,建立畫佈建立中斷點

「時間」分頁中的開始時間統計資料

「時間」分頁頂端現在會顯示要求排入佇列和啟動的時間。

「時間」分頁中的開始時間統計資料。
圖 4. 「時間」分頁中的開始時間統計資料

「時間」分頁中的伺服器統計資料

您現在可以在「時間」分頁中插入自訂伺服器統計資料。如需範例,請參閱伺服器時間值示範

「時間」分頁中的伺服器統計資料
圖 5. 「Timing」分頁中的伺服器統計資料

感謝你的貢獻,感謝sroussey

異動

時間軸面板現已更名為「效能」面板

時間軸面板已重新命名為「Performance」(效能) 面板,以更準確地反映其用途。

「Profile」面板現在是「Memory」面板

「Profile」面板已重新命名為「Memory」面板,以更準確地反映其用途。

CPU 分析器位於隱藏面板後方

「Profiles」面板現已更名為「Memory」面板,因此不需要再將 CPU 分析器顯示在該面板上。此外,長期目標是讓所有使用者剖析「效能」面板。目前,您仍可透過「設定」>「更多工具」>「JavaScript 分析器」使用舊版 CPU 分析器。

請參閱「Chrome 開發人員工具:在 Chrome 58 版中的 JavaScript CPU 剖析」,瞭解如何在效能面板中剖析 CPU。

新版控制台 UI

控制檯面板和導覽匣的使用者介面經過調整。某些不常見的功能已移至更多隱藏位置,且使用者現在更容易存取熱門功能。

  • 按一下「Console Settings」圖示 控制台設定,即可存取自訂主控台行為的設定。
  • 「控制台設定」現已隱藏「保留記錄」
  • 「篩選器」按鈕和窗格會消失。請改用下拉式選單。
  • 系統現在一律會顯示用來篩選記錄的文字方塊。先前已在「篩選器」窗格中隱藏。
  • 篩選文字方塊會自動接受 RegEx,因此「Regex」核取方塊已消失。
  • 「隱藏違規項目」核取方塊已消失。將記錄層級下拉式選單設為「Verbose」,即可查看違規事項。
  • 在舊版 UI 中取消勾選「Show all messages」(顯示所有訊息) 核取方塊的功能,等同於在新版 UI 的「Console Settings」中勾選「Selected context only」核取方塊。
新版控制台 UI
圖 6. 新版控制台 UI

WebGL 事件監聽器中斷點已移動

WebGL 事件監聽器中斷點已從「WebGL」WebGL類別移至「畫布」WebGL類別。WebGL 類別已移除。