除錯 Web 應用效能
瞭解如何使用 Chrome DevTools 除錯 Web 應用效能問題。
Flutter 框架在構建幀、繪製場景以及跟蹤垃圾回收等其他活動時會發出時間線事件。這些事件在 Chrome DevTools 效能面板 中公開,用於除錯。
您還可以使用 dart:developer 的 Timeline 和 TimelineTask API 發出您自己的時間線事件,以進行進一步的效能分析。
增強跟蹤的可選標誌
#要配置跟蹤哪些時間線事件,請在應用程式的 main 方法中將以下頂級屬性中的任何一個設定為 true。
-
debugProfileBuildsEnabled:為每個構建的
Widget新增Timeline事件。 -
debugProfileBuildsEnabledUserWidgets:為每個構建的使用者建立的
Widget新增Timeline事件。 -
debugProfileLayoutsEnabled:為每個
RenderObject佈局新增Timeline事件。 -
debugProfilePaintsEnabled:為每個
RenderObject繪製新增Timeline事件。
說明
#- [可選] 從應用程式的 main 方法中將任何所需的跟蹤標誌設定為 true。
- 在 profile 模式 下執行您的 Flutter Web 應用。
- 開啟應用程式的 Chrome DevTools 效能面板,並 開始錄製 以捕獲時間線事件。