One of the new features introduced in Firebug 1.11 alpha 5 is new waterfall timing graph displayed in Firebug's Console panel and visualizing Navigation Timing data (measured events related to page load performance).
You can see the graph if you execute
performance.timing expression in Firebug command line.
Page Load 948msTime needed to load the page (from navigationStart to loadEventEnd).
Waiting 11msWaiting for response time (from requestStart to responseStart)
Receiving 37msTime needed to download the response (from responseStart to responseEnd)
DOM Processing 883 msTime needed to build DOM (from responseEnd to loadEventStart
DOMContentLoaded 34msTime needed to handle DOMContentLoaded event (from domContentLoadedEventStart to domContentLoadedEventEnd)
onLoad 4msTime needed to handle onLoad event (from loadEventStart to loadEventEnd)
Some events are visualized using vertical lines on the graph. If you need detailed info about what they represent hover mouse over the graph and check the info tip.
The screenshot also indicates that Performance Timing (Detailed Timing) section is expandable providing detailed information about all events, relative time since the page load beginning and also short description for every individual event.
You can hover mouse over individual entries in this table and see appropriate vertical line dynamically rendered over the waterfall graph to show when exactly the event happened.
If you want to inspect the original values stored in
window.performance.timing object, right click on the green object-log at the bottom and pick Inspect in DOM Panel from the context menu.
You should be navigated to the DOM panel and see all the values as they are exposed to the page.
Note that data displayed by the Net panel are collected by Firebug while data stored within
performance.timing object are collected by the browser itself.
Do you have any tips how to improve this feature?