Common Sense Review
Updated March 2016

Mozilla X-Ray Goggles

Remix tool reveals code, can strengthen kids' understanding of the Web
Visit Website
Common Sense Rating 4
Teacher Rating (1 Teacher Review) 5
  • The tool's home page has a great tutorial to help kids get started.
  • The code editor overlay couldn't be easier to use.
  • Activating Goggles puts an unobtrusive menu in the lower-right corner. Remix results are tons of fun.
  • The help button contains lots of pointers for Goggles but not much for HTML, so you're on your own for that.
  • Creating an account allows kids to share their remixes with anyone.
Discovery learning at its best: Revealing chunks of complex code on any website and letting kids edit and remix leads to powerful learning.
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!
Galen McQuillen
Common Sense Reviewer
Common Sense Rating 4
Engagement Is the product stimulating, entertaining, and engrossing? Will kids want to return? 4

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? 5

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? 4

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.

About our ratings and privacy evaluation.
How Can Teachers Use It?

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.

Read More Read Less
What's It Like?

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.

Read More Read Less
Is It Good For Learning?

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. 

Read More Read Less

See how teachers are using Mozilla X-Ray Goggles

Lesson Plans