- Published:October 19th, 2012
- Comments:15 Comments
- Category:Firebug, Planet Mozilla, Release
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.
From MDN:
The Navigation Timing API provides data that can be used to measure the performance of a website. Unlike other JavaScript-based mechanisms that have been for the same purpose this API can provide end-to-end latency data that can be more useful and accurate.
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 loadEventStartDOMContentLoaded 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?
15 Comments
[...] detailed post about this [...]
I just tried it, it's very nice. This feature may be hard to discover however.
I like this new feature a lot. It quickly gives an overview of the page's loading performance.
> Do you have any tips how to improve this feature?
Yes. Sorry that I didn't tell them to you earlier.
1. Put the graph into the group.
2. Do we need the object in the log? Isn't the context menu option enough?
3. Change the formatting of the timing part names. They are not clickable, so they shouldn't look like links. Though there should be a hover effect of the whole line.
4. Choosing "Inspect in DOM panel" from the context menu of the table should show the performance.timing object, not a Firebug internal one.
Sebastian
nice feature.
would be great to see the actual url which the graph depicts in the console.
Nice post, the best. Great help to me,
thank you.
[...] Aby wyświetlić ten wykres, należy wykonać w konsoli polecenie performance.timing. Szczegółowy opis tej funkcji można znaleźć tutaj. [...]
It's a good blog, I like it.ugg boots uk
Paquet Chlo ne obscure, matriau exclusive ou des bijoux Longchamp Handbags en mtal surdimensionn, attire toujours de nombreuses clbrits et les gens de la manner. Voici un sac Chlo Jai lhabitude prohibitifs, et la raison en est que je ne suis pas s?r quils ne seront pas utiliss lengthy terme, ou souvent. Je veux dire la combinaison de toile enduite et cuir velours. Il ne fait aucun doute quelle est trs belle, mais un peu fragile. Le sac de toile est trs Longchamp Handbags pratique et trs lger, transportation quotidien, mais de lautre c?t, il faut tre trs prudent en daim sac principal, il est facile de leau sale est le additionally grand ennemi. Eh bien, ce variety de ailments mtorologiques que vous voulez sortir avec ces deux gars faire? Quoi quil en Longchamp Eiffel Tower Bag soit, Chlo deux couleurs ensemble est vraiment une relation damour-haine.
I did’t know that.
Mozilla's firebug add on helps web designers and programmers who deal with a number of popular languages to compile most sites and pages. One language firebugs helps out with is cascading styles sheets, or CSS. CSS is the language designers use to efficiently set properties for web elements like borders, headings and backgrounds. Thanks.
Readers want to read something they did not know before. That is why it is better that you should relevant research before writing. You will be able to write better post this way.
would be great to see the actual url which the graph depicts in the console.
There are many successful companies today that sell only software products, though there are still many common software licensing problems due to the complexity of designs and poor documentation, leading to patent trolls. Thanks.
They design how stuff works. I would say that is one of the main reasons we have Yahoo. But Yahoo would be nothing if people didn't use it. In terms of gaming, if they didn't have software there would be no Xbox, PlayStation and Wii as we know it today. Nobody would use an Iphone if it didn't have any software. It would be utterly useless. Thanks.
[...] detailed description of this [...]