X-Ray Goggles can do that too.
(The changes are temporary, of course.
You’ll see them on your computer, thanks to X-Ray Goggles, but no one else will be the wiser.
)Let’s see how it works.
Setting up X-Ray GogglesX-Ray Goggles is just a tiny bit of JavaScript that works in your browser.
That means there’s no installation, no security issues, no troubleshooting headaches, and certainly no cost.
It’s developed and maintained by the Mozilla Foundation.
¹To get started with X-Ray Goggles, you need to add a special bookmark to your browser toolbar.
Here’s how:Go to https://goggles.
mozilla.
org.
Make sure you can see your browser’s bookmark bar.
If it’s not visible in Google Chrome, for example, pop open the browser menu, choose Bookmarks, and check Show bookmarks menu.
²Look for the pink button that says Drag and drop me in your bookmark bar.
Click the button, and drag it up onto the bookmark bar.
Now you’ll see a new shortcut appear, named X-Ray Goggles.
Once you’ve added the X-Ray Goggles bookmark, you’re ready to learn some HTML (and vandalize some websites).
All you’ll see, it’s easy.
Examining a pageThe first step is to go to a page that interests you.
Then, click the X-Ray Goggles bookmark in the toolbar.
This activates X-Ray Goggles.
Now you can explore the page just by moving your mouse around.
Wherever you go, X-Ray Goggles finds the HTML element under your mouse and highlights it with a pink box.
Check out this example:Here, the mouse is moving over three different elements on the TIME magazine website: an image at the top, an article title underneath, and a description below that.
The top-left corner of the pink box shows the element name for each section: <img>, <a>, and <div>.
You can turn X-Ray Goggles off at any point by pressing the Esc key.
How to rewrite TIME magazineX-Ray Goggles is a fun way to explore pages.
If you’re teaching a quick-and-dirty HTML lesson, you could describe a common type of element (like an anchor or heading) and then ask students to hunt for it in the wild.
But the real fun happens when you change the content of an element.
To do that, hover over the element so it’s highlighted in a pink box.
Then, click the element.
A panel will pop open with the simplified HTML for just that element.
For example, if you click on a title on the TIME magazine site, you’ll see the corresponding <a> element appear underneath:And you can edit what you see.
If you’re using X-Ray Goggles to show someone HTML for the first time, all they really need to understand is that an element is a container, with a funny looking start tag at the beginning (like <a>), an end tag at the end (</a>) and some content in between.
Then they can start experimenting.
For example, if you try changing the article title that appears in the <a> element, you’ll get a result like this:You can use X-Ray Goggles to make more dramatic changes.
For example, you can add new elements, point links to different addresses, and replace one image with another.
Consider an <img> element that inserts a picture.
If you change the src attribute, you can point it to a different picture.
For example, why not replace the Dalai Lama’s portrait with a succulent grilled cheese sandwich you’ve just discovered in a Google image search:Don’t be afraid to hand X-Ray Goggles to someone who knows nothing about HTML.
It’s a great way to learn through playful hacking.
After all, sometimes the best learning happens when you get to tweak, change, and outright break things you don’t completely understand.
You can break out the HTML editors later.
¹ Mozilla is an not-for-profit foundation that maintains the Firefox browser and promotes open web standards.
² If you’re using a different browser, don’t worry — the X-Ray Goggles page explains exactly what menu options you need to show the bookmarks bar.
.. More details