Bits 'n Bytes

If you are the type of person that likes to see how web pages are constructed, here are a couple of great Firefox add-ons.

The first is Chris Pederick’s Web Developer toolbar/menu. It has a great set of tools that let you examine web page source and style sheets. It makes it easy to display and edit all aspects of a web page. It also has handy tools like a ruler and magnifier. The Small Screen Rendering tool provides a quicker way of seeing how a page will appear on a cell phone. There are so many useful features, there is no point in trying to review them all here, if you have any interest in this sort of tool you should just go ahead, download it and start playing with it yourself.

And another cool tool is Joe Hewlett’s Firebug add-on. Once installed, you can bring up the Firebug window by pressing the F12 function key. It has a terrific inspector that jumps directly to the HTML and CSS code for whatever web page element the cursor is hovering over. If you bring the mouse down to the source window, Firebug highlights the corresponding section in the rendered source page. If you hover the mouse over the URL of an image, Firebug shows a thumbnail as a tooltip. And it is easy to tweak any attribute or style simply by clicking on an item and hitting the arrow keys. It also has profiling features, which I haven’t had a chance to try yet, but are nicely documented by Firebug’s online videos.

Both Firebug and the Web Developer tools are “must haves” if you are doing any kind of web development. They are easy to download into Firefox with the above links. They require the Firefox browser, which can be downloaded from here.

One of out three people are now using Firefox to surf the web. It is worth switching to Firefox just for all of the add-ons that are available. But if you are a die-hard fan of another browser, you can still try out the Firebug Lite JavaScript. In addition, I am sure the JavaScript version is a great help for getting a page to look right across all browsers.