Cool Tools Part I: Firebug
“A poor craftsman blames his tools”. While I don’t know who exactly to attribute that quote to, I do know that the corollary to the rule is that the right tools can make the craftsman. A feature we plan on bringing to this blog is a bunch of “Cool Tools” entries to share some of our experiences with the software that makes our jobs easier.
Kicking this off is Firebug, a Firefox extension that allows you to view the JavaScript, HTML, DOM, style sheets, and a whole lot more in your portal pages:

A really cool feature of Firebug is its ability to display the load times for all the components on your portal pages with a graphical representation of how long each component took to download. For example, check out the image below of a capture for the Plumtree Portal:

Notice the portal page itself (server.pt) was only a fraction of the total load time for a page. It’s also interesting to see how the browser starts loading the JavaScript files before the HTML for the portal page is even downloaded, and how the browser can download multiple static files (images and js) at the same time to increase performance. Remember all this when you’re thinking about site optimizations – sometimes the easiest gains can be made by optimizing parts of the site that aren’t even physically on the portal server, such as external images and JavaScript.
It’s definitely worth the free download at Firefox’s Add-on Site.
[...] Strangely, this was only happening in IE, so we weren’t able to use Firefox’s FireBug. Fortunately, there’s a similar type of tool offered by IEInspector Software called IE Web [...]
[...] profiled header tools before (FireBug is an obvious one), but I haven’t profiled any IE header/debug tools yet. I’ve used [...]