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

歡迎閱讀開發人員工具版本資訊的第一期!從這裡開始,當您首次開啟新版 Chrome 時,開發人員工具會開啟「What's New」導覽匣,並提供該版本的版本資訊連結。

重點特色

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

新功能

可編輯 Cookie

按兩下「Cookie」分頁中的儲存格,即可編輯該值。

編輯 Cookie。
圖 1. 編輯 Cookie

感謝 kdzwinel 的貢獻!

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

您現在可以在「樣式」窗格中檢查及編輯 CSS 變數。詳情請參閱 CSS 變數示範

記憶體不足的中斷點

如果應用程式在短時間內配置大量記憶體,開發人員工具就會自動暫停並增加堆積限制。這可讓您檢查堆積、在主控台上執行指令來釋出記憶體,並繼續對問題進行偵錯。詳情請參閱「One Small Step For Chrome, One Giant Heap For V8」。

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

製作畫布的中斷點

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

透過「事件監聽器中斷點」窗格中的「建立畫布內容」核取方塊,即可在 Canvas 建立中斷點
圖 3. 透過「事件監聽器中斷點」窗格中的「建立畫布內容」核取方塊,建立畫佈建立中斷點

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

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

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

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

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

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

感謝 sroussey 提供!

異動

「時間軸」面板現已改為「成效」面板

「時間軸」面板已重新命名為「效能」面板,以更充分反映其用途。

「Profile」面板現已改為「Memory」面板

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

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

現在,「Profile」(設定檔) 面板稱為「Memory」(記憶體) 面板,但該面板再沿用 CPU 分析器其實並不合理。此外,長期目標是從「效能」面板取得所有使用者的資料分析作業。在此同時,您還是可以透過「設定 >「更多工具」 >「JavaScript 分析器」存取舊版 CPU 分析器。

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

新版主控台 UI

控制檯面板和導覽匣經過了部分使用者介面變更。有些不常用的功能已移至更多隱藏位置,熱門功能現在變得更易於存取。

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

WebGL 事件監聽器中斷點已移至他處

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