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.
September 6, 2006 at 8:39 am
Good works ………..thats help people……great thks
September 7, 2006 at 5:23 pm
a very great tool, i love it.
September 18, 2006 at 11:29 pm
Thank you for two great plug-ins. I appreciate this and professor x.
September 24, 2006 at 8:41 am
thanx for the great extention
September 28, 2006 at 3:16 pm
[...] New Firefox Extension: X-Ray | Design Meme The X-Ray Firefox Extension let�s you see the tags on a page without viewing the sourcecode. [...]
October 4, 2006 at 7:41 am
[...] XRay für Firefox 2.0: Install ( [...]
November 24, 2006 at 3:13 pm
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
November 29, 2006 at 2:32 pm
I don’t usually agree with new year resolutions but I really like your idea. Good Luck!!!!!!!!!!!
December 8, 2006 at 4:19 am
My 17…
Information about 17…
December 18, 2006 at 10:42 am
[...] X-Ray – Lets you see HTML/XHTML tags on a page without viewing the source code. Once installed, right-click the page and select X-Ray, all tags on the page will be displayed on the web page you are viewing. [...]
January 3, 2007 at 3:12 pm
Great!
January 8, 2007 at 6:44 pm
Nice site actually. Gone to my favourites. Thanks for creation.
January 9, 2007 at 11:16 pm
My ftop…
Pipka ftop…
January 10, 2007 at 12:55 am
Pipka italy…
About italy…
January 10, 2007 at 2:27 am
Pipka topnado…
Information topnado…
January 10, 2007 at 4:04 am
Popular top…
Information top…
February 2, 2007 at 12:07 pm
[...] X-Ray [...]
February 8, 2007 at 7:03 pm
Awesome job thank you much
missing one feature only
copy and paste tags )))
February 12, 2007 at 6:35 am
This is my favourite plugin together with web developer toolbar.
February 18, 2007 at 10:01 am
Super work, great that people are still willing to contribute…
February 24, 2007 at 10:24 am
My Firefox was also just updated and everything seems to be still ok with X-ray…
April 1, 2007 at 12:29 pm
[...] X-Ray – Stuart Robertson. “This Firefox extension lets you to see the markup of a page without viewing source, which can be useful when debugging. It’s also both fun and educational to use X-Ray to explore the markup used on other people’s sites.” [...]
April 1, 2007 at 12:56 pm
[...] Maus befindet. Ein Klick auf das Toolbar-Icon deaktiviert den Viewer dann wieder. Die Erweiterung X-Ray unterzieht die Seite einem »Röntgenblick« und zeigt das Markup innerhalb der Seite selbst [...]
April 1, 2007 at 7:19 pm
[...] 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 [...]
April 2, 2007 at 5:55 am
[...] X-Ray zeigt per Mausklick HTML-Tags direkt im Browser an: [...]
April 2, 2007 at 6:52 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] read [...]
April 2, 2007 at 10:42 pm
[...] X-Ray is a cool new Firefox web development extension shows html tags inline with the page so you don’t have to keep flipping between the source and the page. Grab it here. Updated version that works with Firefox 1.5 here. [...]
April 3, 2007 at 7:51 pm
[...] Layouts Another good Firefox add in — X-Ray converts HTML tags to visible elements in the page. http://www.designmeme.com/2006/01/06/new-firefox-extension-x-ray/Friday, January 13, 2006 11:14 AM by Jeff [...]
April 4, 2007 at 5:48 am
[...] [einfach-für-alle] heute gefunden eine schöne Erweiterung für den Firefox. [x-ray] heißt sie und zeigt die auf einer Webseite verwendeten hmtl-tags an. Zitat von einfach-für-alle [...]
April 4, 2007 at 1:34 pm
[...] to my list of "must-have" Firefox extensions, to make an even 10. Today I came across X-Ray, an extension that surrounds page elements with the HTML tags that created them, right there on the [...]
April 5, 2007 at 2:20 am
[...] X-ray [...]
April 5, 2007 at 7:46 pm
[...] A neat addition to the list of Firefox extensions that really help make a web developer’s job a bit easier is X-Ray. [...]
April 6, 2007 at 2:12 am
[...] X-RAY – This one will show you the html TAGS while you’re watching the site itself. COOL idea and it’s still getting developed for further usage. [...]
April 6, 2007 at 9:44 pm
[...] Your page is on StumbleUpon [...]
April 9, 2007 at 2:14 pm
[...] budding web dudes and dudettes, did I just find a gem! New New Firefox Extention: X-Ray, by Design Meme answers the question, How on earth did they code that? It lets you view webpages the way you [...]
April 9, 2007 at 3:16 pm
[...] X-ray，一个firefox extension，用于在页面上显示使用的html标记，比如一个段落就会在最终渲染的页面前后加上<p>和</p>，很直观，相当好用。记得Flash有个很猛的利用sharedobject的调试工具，也叫Xray，呵呵。 [...]
April 11, 2007 at 5:26 am
[...] New Firefox Extension: X-Ray | Design Meme [...]
April 12, 2007 at 3:39 am
[...] X-Ray Firefox Extension. [...]
April 13, 2007 at 12:56 am
[...] Firefox X-Ray Extension [...]
April 13, 2007 at 2:31 am
[...] <p><a>X-Ray</a> – rozszerzenie do Firefoksa wrapujące najbardziej popularne tagi w tekst obrazujący… jakie to tagi. Coś jak w tym poście. Od <a>Łukasza</a>.</p> [...]
April 16, 2007 at 7:22 pm
[...] X-Ray Tags und Elemente direkt sichtbar machen [...]
April 17, 2007 at 1:24 am
[...] New Firefox Extension: X-Ray | Design Meme (tags: firefox extension webdesign) [...]
April 19, 2007 at 4:32 am
[...] X-Ray [...]
April 20, 2007 at 4:20 pm
[...] X-Ray Firefox Extension css-web-tools & services [...]
April 20, 2007 at 6:06 pm
[...] X-Ray Une nouvelle extension de Firefox vient de faire son apparition, X-Ray, permettant de visualiser les tags d’une page sans avoir à regarder la source! Très [...]
April 20, 2007 at 6:27 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 [...]
April 20, 2007 at 7:35 pm
[...] X-Ray is another extension for Firefox to help out web devs – or anyone just curious about the underlying code of a webpage.The X-Ray Firefox Extension let’s you see the tags on a page without viewing the sourcecode [...]
April 21, 2007 at 9:43 pm
[...] desde una simple pantalla, y sin necesidad de tener que mirar el código fuente.Interesante.Mas InfoSalu2 spans = document.getElementsByTagName(‘span’); number = 0; for(i=0; i < spans.length; i++){ [...]
April 29, 2007 at 4:16 pm
[...] Per sviluppatori!Questa estensione di Firefox ti fa vedere i tag della pagina senza aprirla in vista codice.Link: New Firefox Extension: X-Ray | Design Meme [...]
May 1, 2007 at 4:27 am
[...] to web pages WHILE browsing. It seems to fail when using frames through. This one can be found: here [edit] Gmail [...]