Brennan's Weblog

Web Development Tool in Firefox

Today there is a new article on ALA called Print It Your Way which covers the use of CSS to make a web page more printable. Previously there were very helpful articles which covered the increasingly common technique of creating screen and print stylesheets to alter a web page as it is prepared for printing. I use the technique for the whitepapers that we write at work. But the article published today covers a very useful tool...

It is the Web Developer Extension and it works in Firefox and Mozilla. The tool will allow you to more easily inspect a live web page without having to pick through the HTML source. I have just started to use the tool to see what it can do and I am finding that it will make future web development much easier.

There are a couple of killer features that are a part of the extension. The Information group includes the "View Response Headers" and the "View Style Information" options. The first will show you the HTTP headers sent by the server. This will show you certain details which I have always found difficult to see with the typical web browser. The second option is an impressive feature which allows you to change your cursor into cross-hairs and then click on a part of the screen to reveal the CSS which applies to that part of the display. I can tell I will be using that feature over and over to tweak web pages using the DIV/CSS designs that I have been using so much lately.