If you like to know what is going on behind the magic of a Web site’s design, then I have the Firefox extension of your dreams. The extension in question is called X-Ray and it gives you an inside out view of what elements a Web site is made up of.

Here is some of the authors own thoughts on the Firefox extension:

One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the source code and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.

While I create webpages all the time, there’s something about writing a piece of code you have to install that’s very satisfying. Even better was finding that it was actually something I’d find helpful myself.

This current version (0.5) of the Firefox extension supports the following tags: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em.

The X-Ray Firefox extension is for “at least” Firefox 1.5. There are no official version numbers on the Web site, but I am using 1.5 and it is working great. So download it here and let me know what you think about it.

[tags]firefox,html,extension,x-ray,tags[/tags]