SEARCH

How-To Geek

View HTML Tags and Webpage Combined in Firefox

Do you want an easier way to see a webpage’s html tags without viewing the source code in a separate window? Now you can view the webpage and tags combined in the same window using the X-Ray extension for Firefox.

Before

Usually if you want to see the source code behind a webpage you have to view it in a separate window. If you are only interested in a specific section then you have to search through the entire set of code just to find what you are looking for.

x-ray-01

After

The X-Ray extension will let you see the document’s tags (including class and ID names) “side by side” with the webpage in the same tab. You can use either the context menu or the tools menu to access the X-Ray command.

x-ray-02

Here is the same webpage section shown in the first screenshot above. It may look a little odd at first until you get used to seeing both together.

Note: You can return the webpage to its’ normal view by either clicking on the X-Ray command again or refreshing the page.

x-ray-03

The code for part of the sidebar on the same webpage…

x-ray-04

Followed by one of the sets of links at the end.

x-ray-05

Looking at another example suppose you are interested in how part of the main feed is set up.

x-ray-06

Being able to see how a particular element is set up directly in the webpage is certainly better than searching through the entire page of code.

x-ray-07

Conclusion

If you design webpages and want an easy way to see how someone else’s website is coded then you may want to give this extension a try.

Links

Download the X-Ray extension (Mozilla Add-ons)

Akemi Iwaya (Asian Angel) is our very own Firefox Fangirl who enjoys working with multiple browsers and loves 'old school' role-playing games. Visit her on Twitter and .

  • Published 06/17/10

Comments (8)

  1. Locutus

    Wow! This is absolutely amazing!

  2. Jesse

    Can haz Chrome???

  3. bf

    Regretably this extension has not been properly polished. A lot of pages looking like a mess with tags going one on another and headers are total mess.

  4. T

    Very cool. I would like a mode where it’s always enabled.

    @bf: I don’t think it’s a problem. The point is to show behind-the-scenes structure along with the formatted content. When a page is designed to line up with its own content, and the extension stuffs a whole bunch more text into that layout, of course there are going to be overlaps and “messy” formatting. This is a tool for designers and builders who want to see the inner workings of things, not end users who need to be protected from complexity.

    @AA: “If you are only interested in a specific section then you have to search through the entire set of code just to find what you are looking for.”

    There is also “View Selection Source” in Firefox. Select something way down in the page, then right click and choose that option, and the View Source window will come up showing a subset of the HTML code, and your selected portion highlighted.

    But I really like how this shows the structure and the formatting together. Neat tool!

  5. FusionGrokker

    FireBug’s HTML Inspector is better in pretty much every way imaginable.

  6. Strodtbeck

    Great idea for an addon and hopefully it will improve.

  7. yamuna

    MOSTLY THIS USED FOR ME TO GET IDEA IN IMPROVING

  8. Alexander Rhett Crammer

    I think the developer had a good idea when he made this extension but it’s just too messy for me!

    Firefox all together is too heavy and messy.

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!