Skip to content
July 15, 2012 / carlispina

X-Ray the Web with Mozilla Webmaker’s X-Ray Goggles

Resources that allow users to view the source code of webpages are great learning tools for beginning computer programmers. While anyone can view the code from a browser with ease, tools that allow you to hover over parts of the page and see the code that creates that element of the page makes it easier to tackle the code in manageable pieces and also enables you to find pieces of code that can be reused in your own web project. While tools, such as Firebug, already exist to allow you to do this, interface can make a big difference, particularly for beginners, and many of these tools are complicated to install and learn to use. For beginners who are looking for an easier solution, X-Ray Goggles is a great option.

Developed by Mozilla Webmaker as one of their Webmaker Tools, X-Ray Goggles is a bookmarklet that makes it easy to view the individual elements of any web page with just a few clicks. Once the bookmarklet is installed, which is as simple as dragging and dropping it, you can simply click on the bookmarklet and then hover over the desired element of the page. X-Ray Goggles color codes each element that you hover over, to give you a sense of where this code fits in the hierarchy of the page’s code. Once you hover over an element, clicking R pops out the Remixer, which is a box that shows the code in an editable form on the left and a view of what the page will look like with any changes you might make on the right. Users can view either a “basic” version of the code element, which shows it in a more user-friendly and less intimidating manner that looks a bit like a blogging or word processing program or an “advanced” version that looks like a standard text editor. You can also “commit” any changes which you will then see on the web page itself, allowing you to test out any changes you want to make. X-Ray Goggles also has a cool “publish” feature. Clicking P gives you to the option to grab the source code from the entire page to rework for your own page. In the future, there will be a new feature to allow users to publish their changes to a shareable URL without needing to download or, for that matter, see the page’s entire code. While there are lots of tools available to view the source code of a website, I think that X-Ray Goggles’ features and interface provide a great experience for beginners and can be a great tool for those learning web programming. For those teaching or learning web programming, it is definitely worth checking out.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: