X-Ray is a lightweight extension for Firefox that serves to provide an overview of the tags stored on a webpage without peeking into the source code.
The upper advantage of X-Ray is that the view it triggers keeps the layout and the design elements of the current page into focus while also highlighting the tags adjacent to each of them. This makes it fit for learning webpage design, as well as for enhancing the skills of an already experienced web developer.
In order to accommodate the extension inside Firefox, just drag and drop it onto an open window, then give it permission to install. Also, you will have to restart the browser for the changes to take effect.
X-Ray becomes available inside the browser’s context menu and can be triggered by right-clicking on the page of interest and selecting the menu option to which it corresponds. You will soon notice that the site you’re currently visiting takes a whole new shape where you can observe tags separately from elements such as buttons and fields.
Compared to the way the source code of a page is displayed, X-Ray brings a much more streamlined overview that is also easier to understand. On the other hand, some of the components might appear overlapped, sometimes to a high degree, especially in crowded areas of the page.
If, at any point, you want to disable X-Ray, a simple refresh operation should suffice. Alternatively, the changes can be reverted through the same context menu shortcut, if you want to avoid loading the page.
In conclusion, X-Ray makes for a nifty way to observe the arrangement of web tags, but fails to create an airy view of pages that are cluttered. On crowded websites, the elements and the tags become undistinguishable at times, which is not a desirable effect.