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.
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.
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.
The code for part of the sidebar on the same webpage…
Followed by one of the sets of links at the end.
Looking at another example suppose you are interested in how part of the main feed is set up.
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.
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
Wow! This is absolutely amazing!
Can haz Chrome???
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.
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!
FireBug’s HTML Inspector is better in pretty much every way imaginable.
Great idea for an addon and hopefully it will improve.