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

SMS Text
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 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.


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:
Ann Smarty

Ann Smarty

Brand amd Community Manager at Internet Marketing Ninjas
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,... Read Full Bio
Ann Smarty
Download: The Beginner's Guide to SEO
A Complete Guide to Getting Started in SEO.