New Firefox Extension: X-Ray
Posted by Stuart Robertson | Web Design Software
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!
You might also like
|
|
|
|
|
Stuart Robertson is a Freelance Web Designer and Consultant, the Web Manager for the University of Guelph, and Faculty in the Department of Media Studies at the University of Guelph-Humber.
April 18, 2008 at 12:39 pm
[...] New Firefox Extension: X-Ray | Design Meme [...]
April 24, 2008 at 11:18 am
Two great plugins, good work. thanks
April 24, 2008 at 4:17 pm
[...] X-Ray [...]
April 30, 2008 at 7:15 am
[...] jAQUAN, try this Firefox extension: X-Ray. It lets you see the tags on a page without looking at the source code. It doesn’t show table tags, [...]
May 6, 2008 at 7:04 am
[...] X-Ray Die tags einer Website anzeigen ohne Quellcode. [...]
May 29, 2008 at 5:47 am
[...] X-Ray Firefox Extension [...]
May 29, 2008 at 6:29 am
[...] New Firefox Extension: X-Ray | Design Meme [...]
June 17, 2008 at 11:00 pm
Please update for Firefox 3 – thank you!
June 20, 2008 at 12:18 am
[...] X-ray [...]
June 20, 2008 at 3:18 am
Xray is a very good FF extension but don’t work anymore since FF3. Please Update !
June 25, 2008 at 8:43 pm
I’ve submitted an updated version of X-Ray to addons.mozilla.org — it should be available anytime now.
June 27, 2008 at 11:42 am
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!!
July 10, 2008 at 6:26 am
[...] [2008-07-10]: I just discovered that Stuart has posted a comment at designmeme.com that he actually have submitted an updated version to addons.mozilla.org, but I can’t find [...]
July 13, 2008 at 8:39 am
[...] add one more to my list of “must-have” Firefoxextensions, to make an even 10. Today I came across X-Ray, an extension that surrounds pageelements with the HTML tags that created them, right there on the [...]
July 29, 2008 at 4:49 am
[...] Zum Blog des Autors und zur Installation von X-Ray geht es hier Posted by Kjell Bublitz Filed in Design, Software [...]
August 2, 2008 at 7:33 am
[...] over Firefox. But we just came across yet another extension that makes us squeee like little girls. X-Ray for Firefox. With a simple right click you can see the markup of a page. Shazam. For little hackers like us who [...]
August 9, 2008 at 9:43 pm
[...] “Xray” | is very useful at the right time Once 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. The below screen shot shows Xray in action. [...]
August 21, 2008 at 5:09 pm
[...] New Firefox Extension: X Ray | Design Meme [...]
August 25, 2008 at 3:57 pm
[...] braucht – dieser Ansicht sind auch andere. Hier wird jedoch auf eine weitere Extension verwiesen: X-Ray, zur Analyse von Webseiten. Wird gelegentlich getestet. Gepostet von Forengeist unter 10:31 [...]
October 29, 2008 at 10:48 am
Great extension.
January 4, 2009 at 9:17 am
Great job, and great tool for webmasters. Thanks!