Web Developer Blog

YSlow is a plugin for Firefox developed by Yahoo that analyses your web pages and reports back on any performance issues (plus gives a grade). There is a performance report (which shows you areas which can be improved), stats (overview of what is loaded, cached/uncached, cookies and number of HTTP requests), components (page, CSS/JS,JPG etc - expiry, if gzip used, response time, ETag and file sizes) and various tools (view all CSS/JavaScript and a JSLint report). This plugin depends on Firebug .

If you are a web developer and use Firefox, you are likely to have heard of Firebug. The final version of Firebug 1.0 is out, and offers a lot more than the previous version (0.4.1). So I would suggest you to Get Firebug if you haven't already. It is great for debugging as you can edit/inspect HTML and CSS on the live page and set breakpoints in JavaScript. If only Internet Explorer had something like this (I am aware of the Microsoft Script Editor (comes with Office and is activated within Word/Excel etc by pressing Alt+Shift+F11) and Visual Studio, but they are external applications and don't allow debugging while in the browser). Firebug is even handy for non-developers (if they are interested in moving into development) as you can see the scripts and CSS pages are using, as well as see what files are being downloaded by the browser (including those downloaded by Flash).

When you upgrade Firefox from 1.5 to 2 and are a user of the Firebug 1.0 beta, you may notice that when you inspect an element you can't see the styles - i.e. you get an error message - 'Unable to show styles. You must install DOM Inspector.'. This can happen even if you have the DOM Inspector installed. You may also notice that you cannot see the styles in that either. So the problem seems to be that the DOM Inspector is not upgraded to the latest version when you upgrade (or some old files are not removed). To get it working, simply close all instances of Firefox, navigate to the components directory in the Firefox application folder (i.e C:\Program Files\Mozilla Firefox\components and delete all files beginning with the word inspector . Once you have done this, reinstall Firefox to the same folder. When you start Firefox again, you should now be able to edit and disable styles within Firebug. What I have noticed, is that after reinstalling, the files that were deleted...

While Firebug only works on Firefox, there is an option for other browsers (IE, Opera, Safari) called Firebug Lite . While not as powerful as the full Firebug, it is still a good way to debug for other browsers. You just include it on your page as you would any external JavaScript file and then press F12 on the page to show the console.

Firebug 1.0 is available as a beta version. Initially it was going to be a commercial extension, but it looks like it will be open source. Hopefully it will be maintained (and not just by one or two people), although I am not sure how it can be improved (aside from working on IE as well). Very good for debugging (JavaScript and CSS) as you can set breakpoints, view a box-model representation of any selected element, disable CSS (down to specific properties (i.e. font-size)) and more. Get Firebug and make a donation to show your appreciation for Joe Hewitt's hard work.