Review by Galen McQuillen, Common Sense Education | Updated March 2016

Mozilla X-Ray Goggles

Remix tool reveals code, can strengthen kids' understanding of the web

Subjects & skills

  • Critical Thinking
Grades This grade range is based on learning appropriateness and doesn't take into account privacy. It's determined by Common Sense Education, not the product's publisher.
Common Sense says (See details)
Teachers say (1 Review)

Take a look inside

5 images

Pros: Discovery learning at its best: Revealing chunks of complex code on any website and letting kids edit and remix leads to powerful learning.

Cons: Some kids might need a little extra help understanding HTML structure, tags, and attributes, and the in-tool app doesn't provide that.

Bottom Line: It's a blast to use and an easy way to get experimentation and prototyping going with plenty of student choice -- kids are really in the driver's seat!

The best way to use Mozilla X-Ray Goggles is as a cold introduction to code, but it does require some buy-in from students. Start with a quick demo of how the tool works on a projector, and then let kids loose to play with anything and everything they want. A healthy dose of free, unstructured play is what will really make this work. Maybe have your class keep a master list on the whiteboard or a shared document of tags and attributes that can be changed as they discover them, for extra collaborative learning flair.

Some websites can be overwhelming when you're using Goggles, so it might help to prepare a list of curated URLs that students can choose from. Also, you'll almost certainly need a cheat sheet, reference, or tutorial for kids who struggle to get going, as some surely will. Goggles will also work great after a lesson or unit on HTML to get some meaningful live practice. And for advanced coders, you can demonstrate how many browsers have the same functionality as Goggles built right in, albeit with a more hard-core interface.

Continue reading Show less

Mozilla's X-Ray Goggles allows students to inspect and tweak the code found in any site on the Web, including any of the individual elements that make up a Web page. Once activated, Goggles highlights these elements as kids roll over them with a mouse. As they click one of the highlighted elements, Goggles offers a pop-up window displaying the code, alongside a preview of that element. Kids can edit the code right in the window and immediately see a preview of what their changes look like.

Depending on the skill of the user, Goggles can show code in basic (color-blocked) or advanced (traditional HTML) form. Kids can add the X-Ray Goggles button to their bookmarks toolbar to activate Goggles on any website. If kids create a free account, they can even save and share remixes of websites with the rest of the world. The tool seems to work with most (but not all) websites.

Hacking, remixing, and experimenting are the best form of what we used to call "hands-on learning," and Mozilla X-Ray Goggles enables it with great ease. There are few better ways to learn something as esoteric and complex as code (including Web mark-up) than by taking something that already exists and tweaking it to figure out what everything does. Goggles' power lies in only showing the code for each piece a kid might be interested in changing, rather than the entire source. This makes it absurdly easy to go from zero to remixed with one click. 

To get into more advanced editing, kids will undoubtedly need more support in the form of tutorials, reference docs, or links to HTML help. See Mozilla's Teaching Activities for more support. For kids who aren't into code or jazzed by the chance to deface their favorite sites, this might be a tough sell, perhaps better implemented as a summative assignment at the end of an HTML/CSS lesson. 

Overall Rating

Engagement Is the product stimulating, entertaining, and engrossing? Will kids want to return?

Students learning to code will be intrigued as they check out, and tweak, the inner workings of any website. Kids who aren't as interested might not get hooked; some scaffolding and tutorials might be necessary to engage them fully.

Pedagogy Is learning content seamlessly baked-in, and do kids build conceptual understanding? Is the product adaptable and empowering? Will skills transfer?

This is some fantastic discovery learning. Kids get their hands dirty right away hacking and remixing live websites, with real experimentation, prototyping, and critical thinking. Outside HTML support might be needed for some students.

Support Does the product take into account learners of varying abilities, skill levels, and learning styles? Does it address both struggling and advanced students?

There's an awesome tutorial on the tool's home page. When using the tool, a help button provides everything you'd need to make it work correctly. For coding help, though, you'll need to look elsewhere or create your own materials.

Teacher Reviews

Write a review
Featured review by
Alexander F. , Technology coordinator
Technology coordinator
Campbell Hall Episcopal
Studio City, United States
See behind the curtain of the web!
What if our youth didn't just use the web, but could author web content, too? The first step to building something online is seeing how websites work. X-Ray Goggles give the teacher a peek behind the curtain, by making the browser's native developer tools kid-friendly. Students can see the code behind each element that makes up the web page simply by hovering over it. I think this is an essential tool for anyone teaching web-literacy or code.
Read full review