Mozilla X-Ray Goggles
Remix tool reveals code, can strengthen kids' understanding of the web
Take a look inside 5 images
Mozilla X-Ray Goggles
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
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.
Explore Our Favorite Tools
