One of my “New Year’s resolutions”:http://www.designmeme.com/2005/12/30/new-years-resolutions-for-2006/ was to create an “interesting script, plugin, extension, or widget.” I didn’t think I’d write a Firefox Extension only six days into 2006, but after writing about using the CSS :before and :after pseudo elements to create “CSS Curly Quotes”:http://www.designmeme.com/articles/csscurlyquotes/, it got me thinking about other uses for that technique. I thought that wrapping the elements on a page with the actual tags from the sourcecode might be a good tool for learning and debugging, but wasn’t sure how to go about creating an extension. Fortunately, I found “a great tutorial at roachfiend.com”:http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ and with a little trial and error, I’ve finished my first extension.
The “X-Ray Firefox Extension”:http://www.designmeme.com/xray/ let’s you see the tags on a page without viewing the sourcecode.
Install X-Ray Extension for Firefox
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 sourcecode 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.
For version 0.5 the current list of supported tags is: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em. If some other people find this extension useful, I’ll probably add support for more tags, and possibly experiment with adding some other enhancements as well.
Update
By request from the nice folk at digg.com here’s a screenshot of the extension in use:

Donations to The X-Ray Tip Jar are greatly appreciated.
Thanks for your support!
I am also having the same problem W.Peckham descibes. I did notice that aardvark has a new update available. Great work on X-Ray, I use it all the time.
Thank You.
Mark
Any news on the update for X-Ray to work with the latest version of Firefox? I just found the extension and I’m looking to use it but it won’t install…then I saw this update, so hopefully the update will be out soon so I can join in on the fun. Thanks a million!!!
A clever extension–nice idea.
If you’re looking to add a feature, what about displaying the CSS class name?
You could probably abuse the abbr tag to make the class name appear when you hover over the xray inserted tags.
Thanks for a useful little util.
Also, I’d suggest making the link tags appear outside the linked text they surround.
ya i tried downloading the plugin on firefox on the latest updated version and its not working…u comin out with an updated extension soon?
Version 0.7 is now available
Bloody. Freaking. Awesome.
I’d install this if it wasn’t playing right into the hand of the evil Captain Context-Menu Bloat and his ever-swelling ranks of Context-Menu Menu-Item Minions.
Great plugin! I will add it to my favorite Firefox plugins list!
I love it, except that it messes up the page layout. I would love an option that shows all the markup in a tooltip. But I guess that’s getting close to the functionality in Aardvark.
This extension is P H A T
Thx man.
Awesome extension – really useful.
This could get annoying sometimes but i still like it ¯\ ^_^ /¯¯
hey Great, I am glad to find this Plugin. Just Tried. Work Great. Thanks a lot
Hey great move….thanks a lot
Good works ………..thats help people……great thks
a very great tool, i love it.
Thank you for two great plug-ins. I appreciate this and professor x.
thanx for the great extention
That’s really helpful for finding the tags. I took much time before using this extension.
Thanks
I’ll post about it in my blog
Http://raizaM.BlogSpot.com
I don’t usually agree with new year resolutions but I really like your idea. Good Luck!!!!!!!!!!!
Great!
Nice site actually. Gone to my favourites. Thanks for creation.
Awesome job thank you much
missing one feature only
copy and paste tags )))
This is my favourite plugin together with web developer toolbar.
Super work, great that people are still willing to contribute…
My Firefox was also just updated and everything seems to be still ok with X-ray…
Again she immediately bucked wrestling vixxxens and wiped it was, well. He groaned loudly as.
Tell me. They became sucking horse dick delirious at her jack – - – - -.
ok, muchas gracias por la extencion
great plugin, great article Thnx
Cool, thanks for the great extension…
Dude.. that’s awesome! I do web development as a full-time job, and soon I’ll probably be close to starting my own business with it if I can. This tool will save me a TON of time chasing down those rogue tags! Sir, I congratulate you on an awesome add-on!
a great extension
I love it
Thanks
Best Regards from Germany
Thanks for the plugin, this will definitely save me some debugging time.
Thanks for this Plugin.
Nice extension and thanks for the link to roachfiend. The tutorial / help there really helps when trying to create extensions for myself. I’ll definitely be adding this to my StumbleUpon.
Good job. This is actually a very creative and useful tool. I think that there are going to be quite a lot of my friends who will be happy with this – so I’ll be sending them a link of your site. I like the little logo as well (I know that’s just something aside, but I do.) It’s a great idea. The screenshot looks neat as well.
great work! i lov it.
very nice tool thanks!
Two great plugins, good work. thanks
Please update for Firefox 3 – thank you!
Xray is a very good FF extension but don’t work anymore since FF3. Please Update !
I’ve submitted an updated version of X-Ray to addons.mozilla.org — it should be available anytime now.
I’m really looking forward to that x-ray update! I’ve recently realized how much I depend on it – I use it practically every day.
thanks for the amazing plug-in and thanks for the pending update!!
Great extension.
Great job, and great tool for webmasters. Thanks!