View HTML Tags and Webpage Combined in Firefox

By Akemi Iwaya on June 17th, 2010

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 is a devoted Mozilla Firefox user who enjoys working with multiple browsers and occasionally dabbling with Linux. She also loves reading fantasy and sci-fi stories as well as playing "old school" role-playing games. You can visit her on Twitter and .

  • Published 06/17/10
More Articles You Might Like

Enter Your Email Here to Get Access for Free:

Go check your email!