This product is no longer available. Check out top picks for more great tools.

Mozilla X-Ray Goggles

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

Learning rating

Community rating

Based on 1 review

Privacy rating

Expert evaluation by Common Sense



Subjects & Skills

Critical Thinking

Great for

Coding, Creating Media, PBL

Price: Free
Platforms: Web

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.

Editor's Note: X-Ray Goggles is no longer available.

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. 

Learning Rating

Overall Rating

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.


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.


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.

Common Sense reviewer

Community Rating

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.

Continue reading

Privacy Rating

Data Safety How safe is this product?

  • Unclear whether this product supports interactions between trusted users.
  • Personal information can be displayed publicly.
  • Unclear whether user-created content is filtered for personal information before being made publicly visible.

Data Rights What rights do I have to the data?

  • Users can create or upload content.
  • Unclear whether this product provides processes to access and review user data.
  • Processes to modify data are available for authorized users.

Ads & Tracking Are there advertisements or tracking?

  • Personal information is not shared for third-party marketing.
  • Traditional or contextual advertisements are not displayed.
  • Personalised advertising is not displayed.

Continue reading about this tool's privacy practices, including data collection, sharing, and security.

See complete evaluation

Learn more about our privacy ratings