SEO · Tools

X-Ray Creates an HTML Map of Any Web Page (FireFox)

As an SEO you may be taking the full advantage of FireFox’s built-in “View source” option. I for one use it multiple times a day for any type of diagnostics. This post looks at a few ways to make viewing the source code of any page more usable.

X-Ray

X-Ray is a great FireFox addon that makes it much easier to compare the source code with an actual web interface. In fact, it inserts coding right within the page, so you can clearly see which code is used for which web page element.

When applied to a page it can help you see how the document was constructed without having to go back and forth between the source code and the page in your browser.

This way the addon, makes it much easier to:

  • See the page HTML (semantic) structure including the headings
  • See the document structure including <div> and <p> classes, etc.

x ray X Ray Creates an HTML Map of Any Web Page (FireFox)

Other relevant tools

If you think the tool above might turn useful, here are a few more tools I previously reviewed that help with similar tasks:

  • Easily Create a Page Heading Map in FireFox: this tool makes it easier to view and diagnose the heading structure of any web document:
    • It shows all headings in the document, including those hidden with CSS techniques or those without content.
    • It warns when there are no headings in the document.
    • It warns when there are skipping level in the headings structure.
  • FireFox Addons to Explore Page Source Code: my old collection of addons (dating back to 2008) listing some still valid tools:
f8d69258525dec38624a29eb3d570d8c 64 X Ray Creates an HTML Map of Any Web Page (FireFox)
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing, tutorials and her guest blogging project, MyBlogGuest.com.
f8d69258525dec38624a29eb3d570d8c 64 X Ray Creates an HTML Map of Any Web Page (FireFox)

You Might Also Like

Comments are closed.

5 thoughts on “X-Ray Creates an HTML Map of Any Web Page (FireFox)

  1. Thanks Ann :-) I tried your suggestions – XRay as well as View Source Chart; I really like the View Source Chart add on. Thanks for taking the time to share your tips (you sure have a lot of great tips).
    Andy :-)

  2. Seems like an interesting tool. I guess I've been a bit spoiled since I switched to Chrome. The inspect element feature let's you see the code with a simple right click. The problem I am finding with Firefox is that I wind up using so many tools with it, it already bogs down a memory intensive program. :

  3. I guess I'm pretty much with Mike on this one – I have so many wonderful tools to assist both SEO and web design/development, that unless another extension is an absolute killer, then it isn't going to find it's way onto my machine. Firefox used to be lean and mean, but not with all my tools installed. I find Firebug and Web Developer toolbar between them cover pretty much everything I need in terms of inspecting the structure of a document.

  4. Ann you always come with such great tools to use. I just want to say that I for one really appreciate it.
    I'm with the other guys on it being resource intensive and my firefox was so bogged down with addons that over the weekend I actually unistalled it and have reinstalled it now. Noe it hums like it used to.

    I think I could find this to be useful just lime firebug and webmaster toolbar. I'm going to give it a run.
    Thanks again.

  5. Ann you always come with such great tools to use. I just want to say that I for one really appreciate it.
    I'm with the other guys on it being resource intensive and my firefox was so bogged down with addons that over the weekend I actually unistalled it and have reinstalled it now. Noe it hums like it used to.

    I think I could find this to be useful just lime firebug and webmaster toolbar. I'm going to give it a run.
    Thanks again.