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.
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.
Related Tags:
extension • Firefox • firefox 3 • Firefox add-on • Firefox extension • firefox plugin • plugin • x-ray • xray
Related Posts:
Loading ...
Does it show CSS attributes in there as well?
My latest post..SEO Sucks And Shoemoney Swallows At SES
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.
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
I’m no master coder by far, but between X-Ray, Firebug and Aardvark I’m able to fix most of what I break
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
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
So looking forward to the updated Professor X too - heh
[...] 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 [...]
[...] images?????. X-Ray for Firefox????????Firefox [...]
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.
[...] 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 [...]