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.
February 9, 2006 at 12:53 pm
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.
February 9, 2006 at 12:55 pm
Also, I’d suggest making the link tags appear outside the linked text they surround.
February 9, 2006 at 9:52 pm
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?
February 12, 2006 at 1:01 pm
[...] For everyone who has been patiently waiting for the X-Ray extension to be updated to work with Firefox 1.5.0.1—here it is! This new version includes several enhancements: [...]
March 3, 2006 at 3:53 pm
Version 0.7 is now available
March 10, 2006 at 6:19 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. (tags: firefox extension webdesign) [...]
March 17, 2006 at 1:36 pm
[...] Con trato individualizado, X-Ray, para ver las tags de una pgina, sobre la pgina, y Chatsum, que combina extensin con servicio web, para chatear con co-visitantes de pginas web (tambin corre sobre Safari). Technorati Tags: [...]
March 22, 2006 at 6:48 am
[...] See and get the extension. [...]
March 29, 2006 at 12:25 pm
[...] Did that make sense? The X-Ray Firefox extension by Stuart Robinson of Design Meme displays a pages source code without the need to ‘View Source’. Try it out for yourself and report back with how nifty this new extension is. I’m adding this to my recommended webdev extensions collection alongside Web Developer, Aardvark, and MeasureIt. [...]
March 29, 2006 at 1:22 pm
[...] or just a paragraph with enlarged formatting. Posted in General | You can leave a response, or trackback from your ownsite. [...]
March 29, 2006 at 2:29 pm
[...] X-Ray [...]
March 29, 2006 at 5:03 pm
[...] Care of CSSinsider.com, I found a SWEET Firefox extension that displays the wrapping tags of any element on a web page. Rather than flipping between the view-source page/tab and the actual rendered page, this is a perfect solution. [...]
March 29, 2006 at 6:09 pm
The X-Ray Firefox Extension…
Today I found what may be the second best Firefox extension I have ever seen……
March 29, 2006 at 6:22 pm
[...] X-Ray [...]
March 29, 2006 at 6:58 pm
Bloody. Freaking. Awesome.
March 29, 2006 at 9:19 pm
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.
March 30, 2006 at 12:51 am
[...] X-Ray Firefox Extension lets you see the tags as you view live pages – cool. [...]
March 30, 2006 at 2:48 am
Great plugin! I will add it to my favorite Firefox plugins list!
March 30, 2006 at 3:10 am
[...] Roger Johansson macht in seinem Blog auf die Extension “X-Ray” aufmerksam. Sie blendet bei Bedarf die umgebenden HTML-Elemente auf einer Seite ein, wodurch man einen schnellen Überblick auf die Markup-Struktur bekommt. Natürlich bieten auch andere Extensions (z.B. die “Web Developer” Toolbar) sowie Opera eine ähnliche Funktionalität, die jedoch nicht so einfach zu bedienen sind. X-Ray wird über das Kontext-Menü innerhalb einer dargestellten Webseite an- bzw. abgeschaltet und erhält dabei auch (soweit wie möglich) das vorhandene Layout. Natürlich kann es nur eine zusätzliche Hilfe beim Entwickeln einer Seite sein… aber da macht es doch schon eine gute Figur. Leider zeigt es keine zugewiesenen IDs oder CSS-Klassen an, welche jedoch leicht über andere Extensions wie das schon vorher erwähnte “InspectThis” zu erreichen sind. [...]
March 30, 2006 at 4:28 am
[...] Ever had a problem searching for a specific bit of code in the ‘view source’ window? Well, X-ray is a nifty new – well, newish – extenstion for Firefox that should help. X-ray shows the page markup in the context of the page, so you can visually orient yourself to where the code is. Simple, but really, really useful. [...]
March 30, 2006 at 5:37 am
[...] Eine weitere Extension für den Firefox ist erhältlich: X-Ray [...]
March 30, 2006 at 9:34 am
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.
March 30, 2006 at 7:54 pm
[...] FF Extension: X-Ray View your markup on a Firefox page without having to view source. Sometimes quite unreadable, extremely useful at others. Thanks 456 Berea Street Technorati Tags: firefox extensions xray [...]
March 31, 2006 at 12:59 am
This extension is P H A T
Thx man.
March 31, 2006 at 2:24 am
Awesome extension – really useful.
March 31, 2006 at 9:33 am
Firefox-Extension X-Ray…
Ein kleiner aber wirksames Helferlein für Webdesigner und Bloggern bei der täglichen Quellcode-Recherche ist die Firefox Erweiterung X-Ray. Sie offenbart auf einen Klick die Anzeige der HTML-Tags der Seite im Browser. Der (für mich) wen…
April 2, 2006 at 12:48 pm
[...] Passend dazu: die Firefox-Erweiterung X-Ray, die den Quellcode einer Seite innerhalb der Inhalte anzeigt. [...]
April 2, 2006 at 12:59 pm
[...] X-Ray – Anzeige von Tags in der aktuellen Seite Tag: WordPress [...]
April 2, 2006 at 6:27 pm
[...] XRay: Zeigt den HTML-Code mitten im Inhalt an. Bilder sagen mehr als Worte: [...]
April 2, 2006 at 8:34 pm
[...] Great Firefox Extension that allows you to view source… without viewing the source. [...]
April 3, 2006 at 12:27 pm
[...] Durch die Firefox-Extension X-Ray wird die Anzeige der aktuellen Seite um diverse verwendete HTML-Tags ergänzt. Folgende Tags werden lt. Stuart Robertson unterstützt: 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. Tag: Firefox [...]
April 3, 2006 at 3:29 pm
[...] X-Ray Bei X-Ray handelt es sich um ein Tool, dass bei Aktivierung den kompletten Sourcecode einer Webseite direkt im Browser anzeigt. Die Inhalte bleiben dabei erhalten und von der sie umschließenden HTML-Struktur eingerahmt. Auch dieses Tool eignet sich herrvorragend dazu, den Aufbau einer Seite zu analysieren und gegebenenfalls zu optimieren. [...]
April 4, 2006 at 1:05 pm
[...] New Firefox Extension: X-Ray | Design Meme [...]
April 4, 2006 at 7:50 pm
[...] 456 Berea St draws our attention to X-Ray for Firefox: [...]
April 5, 2006 at 1:35 pm
[...] Courtesy of 456 Berea St., the X-Ray Firefox extension – see your markup on the page. You don’t have to view the source code, but can see the elements on the page. One of the best extensions I’ve seen in months. [...]
April 6, 2006 at 4:54 am
[...] X-Ray – Tags Anzeige ohne den Sourcecode asehen zu müssen. [...]
April 8, 2006 at 12:39 am
[...] New Firefox Extension: X-Ray | Design Meme New Firefox Extension: X-Ray (tags: lazysheep) [...]
April 10, 2006 at 1:45 pm
[...] This is a firefox extension which lets you see tha tag of a page without using view source. All you have to do is right click on the page and select the extension. It is called X-Ray. Check it out, it is very useful if you are a amateur web designer. Also check a blog entry which has some details about it. [...]
April 13, 2006 at 2:40 pm
[...] Dr. Web – Firefox: Erweiterungen Teil 1: Erklrt die Webdeveloper Toolbar (kennen und schtzen wir ja inzwischen alle), MeasureIt, ein brauchbareres Vermessungstool), Aardvark, Platypus, Greasemonkey und X-Ray. [...]
April 15, 2006 at 4:13 pm
[...] X-Ray Tags und Elemente direkt sichtbar machen [...]
April 16, 2006 at 2:00 pm
[...] Link [...]
April 27, 2006 at 10:36 pm
New Firefox Extension: X-Ray | Design Meme…
Someone at Smarking has bookmarked your post….
April 29, 2006 at 1:18 pm
[...] New Firefox Extension: X-Ray | Design Meme (tags: firefox extension) [...]
May 8, 2006 at 2:07 pm
[...] [...]
May 12, 2006 at 9:52 am
[...] X-ray是一个用于将往常默默无闻地工作在“幕后”的XHTML代码带到“台前”的Firefox插件。 [...]
May 16, 2006 at 11:56 am
[...] X-Ray: an extension for Firefox [...]
June 19, 2006 at 2:57 pm
This could get annoying sometimes but i still like it ¯\ ^_^ /¯¯
July 5, 2006 at 1:17 am
[...] 6. I installed the Firefox X-Ray extension so that I can see the html tags on a page without viewing the source code. [...]
August 25, 2006 at 2:23 am
hey Great, I am glad to find this Plugin. Just Tried. Work Great. Thanks a lot
September 6, 2006 at 8:36 am
Hey great move….thanks a lot