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
Download the X-Ray extension (Mozilla Add-ons)
