Wednesday August 20th, 2008 | Design, News, Review, SEO, Tools

X-Ray Firefox Extension Updated for Firefox 3

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Did you ever wish you had X-Ray vision?

I remember seeing the ads in comic books when I was a kid. Those evil advertisers – Cashing in on keyed up adolescent boys by suggesting that for a mere $1 they could sneak a peak at a shapely silhouette.

Oddly enough, I was more interested in seeing the inner workings of mechanical & electronic devices, than invading a woman’s personal space & privacy.

I’ve only gotten nerdier over the years, so, you can imagine how happy I was to discover a Firefox extension that allows you to see into the inner workings of a websites code, in-line with the visible elements.

After the upgrade to Firefox 3 the extension was no longer compatible, until this week when I learned that X-Ray, one of my favorite Firefox extensions, has finally been given the green light for Firefox 3.

Stuart Robertson, the extensions creator, apparently has had the plug-in updated for weeks (since shortly after the glorious release of Firefox 3), but he’s been waiting for the Firefox extension team to review & approve it.

Anxious to get my hands on the updated X-Ray extension, I contacted Robertson and inquired about it’s status. He was very cool and told me about the review hold-up and offered to set me up with the updated xpi!

So, what is the X-ray extension?

For those who don’t know, X-Ray is a simple yet genius little add-on for Firefox that makes it simple to expose HTML tags in live pages.

There’s no need to flip back and forth between a “view source” window and the actual page to find out which class is applied to a given element, or which content is an H1 header vs which in an H2 – you simply right-click, and select the X-Ray option.

With one click of the mouse all the pages HTML tags (<h1></h1>, <div class=somestyle></div>) including their class are exposed right there on the page!

  • SEOer? Do a quick check for H1, H2 & H3 tags, never leave the visible page!
  • Designer? Find what class an element is using in a flash!
  • New to coding? X-Ray a page to see what makes it tick!
  • Debugging? Easily find orphaned or incorrectly nested elements!

Alone it’s pretty handy, but combined with Web Developer (with easy CSS disabling), and Firebug (with all of it’s bells & whistles) X-Ray is a godsend for quick-n-dirty, on-the-fly coding, debugging, troubleshooting and more! This is definitely one Firefox extension that deserves to be in every SEO superheroes utility belt.

Add-on Author
X-Ray extension info
Download X-Ray v0.9

Firefox Add-ons
X-Ray extension info
Download X-Ray v0.9

Official Firefox 3 X-Ray Update

The latest version of the X-Ray add-on (v0.9) is now available for immediate download & installation.

You can get more information about X-Ray and download the updated extension at Robertson’s own site (Design Meme) or over at the official Firefox add-ons repository.

11 great comments so far, keep em coming! | rss

  • Wednesday August 20th, 2008

    Does it show CSS attributes in there as well?

    My latest post..SEO Sucks And Shoemoney Swallows At SES

  • Wednesday August 20th, 2008

    Hey Aaron, (Thanks for visiting/commenting)

    While it does show class & ID names, it doesn’t appear to parse inline style declarations.

    If you’re running the Firebug extension (which I highly recommend, it’s another rockin’ add-on) getting that next level of info is just a click away.

    I mean, X-Ray doesn’t take the place of those more robust tools, but I really dig being able to see the HTML tags ‘inline’ with the actual page structure.

  • Wednesday August 20th, 2008

    Cool. I actually just looked and the tool I used to use for CSS editing just updated. Aardvark visually blocks what is what. Cool to have an extra option for the HTML as well.

    My latest post..SEO Sucks And Shoemoney Swallows At SES

  • Wednesday August 20th, 2008

    Sweet – I checked out Aardvark briefly before, I like the way you can use set keystrokes to take out elements or color them on the fly – and how you can call up the source code of an individual element (& nested elements)

    I’m no master coder by far, but between X-Ray, Firebug and Aardvark I’m able to fix most of what I break :P

  • Wednesday August 20th, 2008
    Stuart Robertson

    That’s totally the kind of X-Ray I was thinking of when I created this. :)

    If you like X-Ray, the updated companion extension ‘Professor X’ will be available very soon. That lets you see into the ‘HEAD’ of the web page. Heh.

    My latest post..Twitterbook v3 Now Available

  • Wednesday August 20th, 2008

    looking forward to that one too – I used to love the MetaTags sidebar add-on – it’s pretty cool, it automatically grabs the meta content and displays it, nice & neat in a sidebar.

    The output can be highlighted/copied/pasted – which was cool because I used it when I would do an initial overview of a sites optimization, or when I was reviewing a clients implementation of my recommendations.

    I would just copy the discrepancies into an excel – I hate typing :P

    So looking forward to the updated Professor X too – heh

  • Monday August 25th, 2008
    Top 10 Free Online CSS Editors | Straderade News

    [...] is Firefox X-Ray which allows you to take a quick look at <h> tags, divs, HTML, images, etc. X-Ray for Firefox was recently updated for Firefox [...]

  • Tuesday August 26th, 2008
    10???CSS?????? - ???

    [...] images?????. X-Ray for Firefox????????Firefox [...]

  • Thursday August 28th, 2008
    Jacob from JobMob

    Nice find. I was pretty sure that you could already do this with the Web Developer extension but if that’s the case, I can’t see how. Just grabbed it.

  • Saturday August 30th, 2008

    Just a note – another Firefox add-on from the same author (Stuart Robertson) has been updated for Firefox – Professor X is another great add-on, I’ll post more about it soon, just wanted to drop the word.

  • Saturday November 01st, 2008
    Recent Links Tagged With "firefoxextension" - JabberTags

    [...] public links >> firefoxextension X-Ray Firefox Extension Updated for Firefox 3 Saved by sango712 on Fri 31-10-2008 A potentially dangerous new Firefox extension concept Saved [...]

Thanks for reading.

Quick, add your comment!
Trackbacks are enabled.