See your markup in context with X-Ray
A neat addition to the list of Firefox extensions that really help make a web developer’s job a bit easier is X-Ray.
Stuart Robertson’s X-Ray Firefox extension enables you to see the markup of a page without viewing source, which can be really helpful when debugging your work. It’s also both fun and educational to use X-Ray to explore the markup used on other people’s sites.
X-Ray is very revealing, so better make sure your markup is in perfect shape!
- Previous post: The target attribute and opening new windows
- Next post: Always specify character encoding
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
An interesting and simple idea for an extension, and I like the fact the source is wrapped around each rendered element. However, the Web Developer extension, in particular various options under the Information and Outline menus, can do this and a whole lot more. Thanks for the tip Roger.
Using the Webdeveloper extension (and every Webdesigner should ;-) ), there no special need for that XRay.
Another extension with such an intention is the Aardvark Extension:
http://www.karmatics.com/aardvark/
Douglas, John: Yeah the Web Developer Extension is indispensable, but I can't find an option that does what X-Ray does. What am I missing? :-)
I'd highly recommend the FireBug extension. While it doesn't put the markup directly on the page, it does have a view where you can run through the source, highlighting the element you're currently on.
In addition it's got a great set of features such as examing the CSS, and JS attributes applied to an element.
Another "X-Ray" tool. BLITZ (blitzagency.com) has a similar tool for, well, for x-raying flash files.
http://labs.blitzagency.com/?cat=2
X-Ray is good, but I find I prefer to use the 'DOM Erase' function in ScrapBook (Firefox save-page extension) on the pages I've saved, you can just hover over it and it gives you element info. Only problem is, when you click the element in question gets deleted. But yes, X-Ray is good.
I use the Web Developer extension all the time -- particularly to view/edit the CSS on a page (CMD+SHIFT+E). I've found using X-Ray alongside that has been helpful when debugging CSS issues on other people's sites. Of course I might be a bit biased... but I use it more often than some of the other CSS stuff I've written about (ImageMaps, Underlines, Accesskeys). Nice to see other people are finding it useful. :-)
I can't live without the web developer extension. Under Information I really like the Display Element Information. It allows you to hover over an item and it will pop up all kinds of info on it. I also use View Rendered Source plugin quite a bit.
Of course, Opera has had that exact functionality ("Show structural elements" stylesheet) built-in for several years now...
Each and every day I see people raving about yet another Firefox extension that copies features Opera has had for ages.
I like this X-Ray-Extension. It shows a simple way to get a quick glance at the structural markup. Of course it can't substitute other extensions like the "Web Developer" and I think it's not supposed to. There are many ways to debug a webpage and this is just another approach to it apart from preference or lack of functionality what already exists. I use a lot of other developer extensions which I could list here, but that's not the point. ;)
And a (personal) note to the Opera thing... you can say that exact thing about countless features of * that copied it from *. It's always been like this since... well, forever. ;)
That's really useful, Roger. Just another tool for the toolbox, soon to be well-worn. Thanks a lot for the tip-off.
Great extension, Roger!
I wouldn't have found it till you mentioned it.
Yet another extension for me to view code in a different way! :)
(P.S. Can you rephrase the "Comment code" to something easier to read like "What is the street number given in the site's title?")
Martin: Good idea about the comment code. Will look into it asap.
Nice extension! It's a pity that it don't work fine with pages that use :after and :before pseudo-elements for layout. an exemple
Hey - good tip Roger! #nabs that one for my Firefox!#....
Hmm, it looks good and useful, the only thing is that it places some of the markup directly over the content (well, it has on my site when I just tested it out)...so that seems a bit problematic - difficult to read. I'm still finding the Firefox Developer Toolbar plugin one of the best things (ever?!)...when it highlights how pages are divided and such. Quick and easy to use. I'll keep trying the X-Ray tool too...and I think it's a useful tip all-round. :)
Another little extension that makes life much easier:
InspectThis
Allows for opening the DOM inspector from the context menu of just about any item. Saves me about 15 seconds every time i use it :D
Sorry, comments are closed for this post.