0
November 3, 2009

Firebug Web Development Tool

We have developed this site using Wordpress and up until now things had been great. The vast amount of plugins and support available on the Internet, coupled with its “out of the box” SEO friendly reputation was enough to entice us.

However, we’ve noticed over the last couple of weeks that page load times seemed to have increased dramatically for front-end users. A couple of weeks back we updated to version 2.8, but we are hesitate to upgrade to the latest 2.8.4 as we are aware that some plugins have not yet been updated.

To address the front-end load times issues, we have disabled all plugins, then re-enabled one by one checking each time if it had an effect on the page load time. We identified the problems (lightbox and some media widgets) and left them disabled. As a result the front-end now loads within a respectable time.

For those of you who use Firefox there is a great plugin called firebug that you can use to diagnose how long each element of your page takes to load.

Downlond Firebug 1.4.2 for free

Firebug is also a great tool for…

Inspecting and editing HTML
Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

Tweaking CSS to perfection
Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.

Visualising CSS metrics
When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

Monitoring network activity
Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.

Debugging and profiling JavaScript
Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

Quickly finding errors
When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.

It’s a excellent tool for any web designer/developer. It helped us assess our sites performance and identify which plugins created serious load issues.

We don’t know how we lived without it!

Say something »

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment