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.
May 1, 2007 at 8:17 am
[...] to Roger Johansson, I’ve found a new firefox extension called X-Ray, which I think I’m going to find quite [...]
May 4, 2007 at 2:18 am
[...] must stay away from the View Source command and use and use two of my favorite Firefox extensions, X-Ray and [...]
May 5, 2007 at 7:59 am
[...] on a routine web surf that took me to Design Meme.com I discovered a Firefox Extension called X-Ray. “Well I have to have that! It will make my life so simple!” The I found myself crusing over to [...]
May 7, 2007 at 5:11 pm
[...] Is that an h3 tag or just some bolded text? X-Ray shows you what s beneath the surface of the page. New Firefox Extension: X-Ray [Design Meme] 2 comments, latest by [Unknown] [...]
May 19, 2007 at 10:32 am
[...] ＞＞X-Ray タグの可視化。 [...]
May 21, 2007 at 5:21 am
[...] Modern Syntax : ページ上にHTMLタグを表示してくれるFirefox用プラグイン という記事を読んでNew Firefox Extension: X-Ray | Design Memeを知ったわけですが、あー、なるほど、これは便利かもしれないなぁ、でも僕はFirefoxとか使わないからなぁ、Safariで使いたいなぁと思ったのでBookMarkletで似たようなモノを作ってみた（っていうか、パクリですね…、こりゃ…）。 [...]
May 21, 2007 at 5:11 pm
[...] pantalla, y sin necesidad de tener que mirar el cdigo fuente. Interesante. ENLACES RELACIONADOS http://www.designmeme.com/2006/01/06/new-f…xtension-x-ray/ Informacin hispamp3.com Normas del Foro, por favor leer para evitar confusiones, gracias.Si [...]
May 23, 2007 at 8:51 am
[...] Firefox extensions I couldn’t live without MeasureIt 0.3.5 How to create Firefox extensions New Firefox Extension: X-Ray Web Developer Extension Rapid Web Development and Testing with Mozilla Firefox HTML VALIDATOR [...]
May 25, 2007 at 11:55 am
[...] fresh XP installatie…! X-Ray (bekijk HTML source zonder daarvoor de source te bekijken, ja ja http://www.designmeme.com/2006/01/06/new…ion-x-ray/ View Source Chart http://jennifermadden.com/scripts/ViewRe…ource.html Superextensies voor mij [...]
May 25, 2007 at 8:05 pm
[...] Par Pascal, samedi 14 janvier 2006 à 06:00 :: WebMaster Voici une belle petite extension pour votre navigateur préféré (Firefox bien sûr). L’extension vous permettera de voir ou se situent vos TAG HTML directement dans une page HTML. Donc on évite ainsi l’aller retour entre l’HTML et la source. Firefox : X-Ray [...]
June 26, 2007 at 1:21 am
Again she immediately bucked wrestling vixxxens and wiped it was, well. He groaned loudly as.
July 5, 2007 at 12:37 am
Tell me. They became sucking horse dick delirious at her jack – - – - -.
August 14, 2007 at 4:23 pm
ok, muchas gracias por la extencion
September 5, 2007 at 12:58 am
[...] X-Ray – Revisa las etiquetas de una web sin necesidad de acceder al código fuente. Tags estilos [...]
September 8, 2007 at 5:15 pm
[...] ukratko radi u firefoxu skini firefox plugin x-ray http://www.designmeme.com/2006/01/06/new-firefox-extension-x-ray/i gledaj u ekran sto duze mozes uz otvoren x-ray bice ti malo jasnie kako sve funnckionise kao [...]
September 9, 2007 at 11:14 am
[...] X-Ray extension for Firefox will let you see HTML tags without looking at the source code. Once installed [...]
September 9, 2007 at 11:55 pm
[...] படத்தில் பார்க்கும் எக்ஸ் ரே! இதை உபயோகித்ததில் பல [...]
September 12, 2007 at 2:15 pm
[...] New Firefox Extension: X-Ray | Design Meme [...]
September 13, 2007 at 1:48 pm
[...] New Firefox Extension: X-Ray | Design Meme Enjoyed It ? Share It ! :These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
September 27, 2007 at 10:09 am
[...] x-ray extension [...]
October 1, 2007 at 9:42 pm
[...] X-Ray [...]
October 7, 2007 at 7:31 am
[...] (javascript greasemonkey tools firefox) Bookmark [Discover] New Firefox Extension: X-Ray | Design Meme http://www.designmeme.com/2006/01/06/new-firefox-extension-x-ray/ (firefox extension extensions [...]
October 21, 2007 at 2:28 pm
[...] Le fait d’entourer les blocs et d’afficher leurs id est aussi très pratique.Sinon, l’extension X-Ray est aussi pratique, pour afficher les tags html directement "au milieu" du texte. Hors [...]
October 21, 2007 at 6:11 pm
[...] x-ray extension [...]
October 25, 2007 at 12:44 pm
[...] X-Ray Firefox Extension css-web-tools & services [...]
November 4, 2007 at 9:13 am
[...] code. X-ray Firefox plugin is written by Stuart Robertson and can be downloaded from his blogg Design Meme Posted by friweb on 08.04.2006 – [...]
November 5, 2007 at 3:27 am
[...] mozilla firefox programming xml xul [»] Added >30 days ago by joelamantia, 3 Users saveNew Firefox Extension: X-Ray | Design Meme design firefox browser extension Added >30 days ago by ikepigott, 1 User save13 Great Firefox [...]
November 26, 2007 at 1:34 pm
great plugin, great article Thnx
November 27, 2007 at 9:05 am
[...] Firefox Extension I have found another cool Firefox Extension called X-Ray. This extension allows you to see the HTML page markup right on the webpage, without having to [...]
December 5, 2007 at 4:23 am
[...] advanced scripts, tutorials, online tools, live help, Perl, PHP, HTML, XHTML, Javascript, CSS New Firefox Extension: X-Ray | Design Meme One of my New Year’s [...]
December 17, 2007 at 5:44 am
Cool, thanks for the great extension…
December 22, 2007 at 12:33 pm
[...] probably dugg beyond belief (1227 and counting), I’ve been using the X-Ray Firefox Extension and have been loving it. It’s kind of like the ability to paint with numbers and see how it [...]
December 24, 2007 at 2:14 am
[...] on 2006-03-31 15:37:14 X-Ray is a new firefox extension for developers which when applied to a page it can help you see how the [...]
December 25, 2007 at 2:42 pm
[...] x-ray FF extension [...]
January 10, 2008 at 1:32 pm
[...] to Install:1) Download xray.xpi using IE browser from here.2) Open Firefox browser.3) Then Go to File –> Open File –> navigate to downloaded [ [...]
January 13, 2008 at 10:56 pm
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!
January 14, 2008 at 11:55 am
[...] [...]
January 15, 2008 at 2:19 pm
[...] in den Quelltext gucken geht nicht mehr: die X-Ray Extension fr Firefox stellt auf Knopdruck die verwendeten HTML-Tags innerhalb der Website dar. Praktisch, wenn man mal [...]
January 18, 2008 at 11:02 pm
[...] View Source Chart is a really great Firefox extension. Best combined with X-Ray. [...]
January 31, 2008 at 5:21 am
a great extension
I love it
Thanks
Best Regards from Germany
February 1, 2008 at 2:21 am
Thanks for the plugin, this will definitely save me some debugging time.
February 1, 2008 at 3:24 am
Thanks for this Plugin.
February 3, 2008 at 3:53 pm
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.
February 11, 2008 at 1:53 pm
[...] X-Ray Extension [...]
February 27, 2008 at 9:35 am
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.
February 27, 2008 at 11:18 am
great work! i lov it.
March 11, 2008 at 11:02 pm
very nice tool thanks!
March 21, 2008 at 9:16 am
[...] Ne consiglierei l’uso in ogni caso insieme alla Web Developer Toolbar che rende disponibili anche un sacco di altre utilissime funzionalità. Ma ecco i link qui sotto: X-Ray [...]
April 3, 2008 at 1:59 am
[...] x-ray [...]
April 9, 2008 at 2:12 am
[...] http://www.designmeme.com/2006/01/06/new-firefox-extens... [...]