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!

Posted on March 29, 2006 in (X)HTML, Browsers, Quicklinks

Comments

  1. 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.

  2. 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/

  3. March 29, 2006 by Roger Johansson (Author comment)

    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? :-)

  4. March 29, 2006 by Scott Wehrenberg

    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.

  5. Another “X-Ray” tool. BLITZ (blitzagency.com) has a similar tool for, well, for x-raying flash files.

    http://labs.blitzagency.com/?cat=2

  6. 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.

  7. 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. :-)

  8. 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.

  9. March 30, 2006 by Matt

    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.

  10. 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. ;)

  11. That’s really useful, Roger. Just another tool for the toolbox, soon to be well-worn. Thanks a lot for the tip-off.

  12. March 30, 2006 by Martin Smales

    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?”)

  13. March 30, 2006 by Roger Johansson (Author comment)

    Martin: Good idea about the comment code. Will look into it asap.

  14. 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

  15. 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. :)

  16. 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

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.