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
    TheMadHat

    Does it show CSS attributes in there as well?

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


  • Wednesday August 20th, 2008
    AzAkers

    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
    TheMadHat

    Cool. I actually just looked and the tool I used to use for CSS editing just updated. Aardvark http://karmatics.com/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
    AzAkers

    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
    AzAkers

    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
    AzAkers

    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.





«
»