I’ve collected more than enough examples of Web Tools Biting the Dust but it stings more when the dust biting is by organization that believes that the internet “is a global public resource that must remain open and accessible to all.”

Now in the queue for the next iteration of this video is Mozilla Goggles. Read the excuses.

This once fantastic tool offered a way to play with any web page by being able to alter (in your browser) any element of the underlying web content by inspecting the tags, divs, and bits right on screen.

The X-Ray Goggles web site "Remix any Page on the web"
The Goggles have been shelved. Oh well for public resources remaining open and accessible to all.

To me, at one time this was better than a chicken on a skateboard. I used these often for making parodies of web sites. I used it once to makeover every little bit of a YouTube Video page to dream of a Mom Powered Comment Patrol for those infested comment streams.

My X-Ray Goggles masterpiece once lived at http://p.webremixes.org/erdlklkd but “it’s dead Jim” and not even a shred lives in the WayBack machine.

Mozilla’s poor substitute is a link to some mousey coding site. Blecccch.

Enter The Browser Inspector

My suggested replacement is not quite equivalent in ease of use and share-ability, but at the same time it opens the door to a powerful tool for not only understanding what lives below the web page, but tinkering with it learn CSS modification trickery.

What you will want to do is activate what is needed for your web browser’s Inspector tool. Lifewire offers the way in whether you use Chrome, Firefox, Safari, heck even Internet Explorer. My example here uses the Google Chrome Dev Tools extension.

I usually feel the call for this when I stumble across a web site I wish I could get sarcastic with. But there are other purposes of re-doing a web page. Be it creating different narratives like “what if web sites were honest”, or suggesting better design elements, or maybe how to re-write directions?

Again, I do it to mock.

So somewhere I stumbled across this Twitter Data Partners site, and something about the list of “services” under the drop down menu said, “Mess With Me”

FInd a Partner page on Twitter with "I'd like a Twitter Data partner to help with..," and a drop down menu with items like "Monitoring Social Trends", "Managing Customer Care"

I decided to change all the meu options. #BecauseICan.

First, I jump to the end, what was tweeted…

The way in is to select with the mouse a portion of the element I wish to inspect. Via control-click (OSX) or right-click (the other OS) I select Inspect Element from the contextual menu.

Select some text in the menu and then activate the Inspector Goggles to peek under the web page hood.

Now breathe deeply. You are going to see a whole raft of code and stuff. Keep repeating, “It’s only text” and “I cannot break anything”. The portion you had highlighted should be also lit up in inspector. If not, you can explore up and down open caret icons to expose more code. As you select different elements, the highlight on the web page changes too.

In this case, I landed right into the label element of the form’s select input for the first item in the menu.

Inside the browser inspector, a red box around the HTML code for the form element.

Usually I am using this to develop, change my own web site’s CSS. You can add and change CSS and see the results live- like I could change the font, font size, hide things, change colors.

But in this case, I only want to change the displayed text where it reads “Monitoring Social Trends”- I can double click, and edit it right there. I made it read “Keep Everyone’s Nose Out of My Data” (now that is a service I’d wish twitter to offer).

The same portion of text in the code has been changed, and a red arrow points to the web page view showing it has changed too.

As I make changes in the inspector, they are changed in the web view window. Again, you are not editing or hacking any web site, just your local copy of it’s code.

I can work my way down again and change each menu item to something more like I dream of as a twitter data service. I could do much more here, this is just to get you started thinking.

But like Mozilla Goggles did, you can edit/change any part of the web page. If you can put images somewhere with a public URL (dropbox public link, imgur, your ow domain) you can even substitute images URLs in their <img> tags.

There’s no saving, so you are left to do a screenshot. That’s one thing the old Mozilla Goggles had, it’s published version was a functional web page. But at least with the browser inspector, it’s not gonna disappear of an organization decides they can’t figure out how to keep your stuff online anymore.

Mocking up web pages to tweet screen shots is the low end of what you can do in the inspector. It’s a gateway to figure out the code by messing with it. It’s the best way I have learned to do things, whether here, or in places like codepen.

When they take away your Goggles you need not be left in the dark.

Featured Image: Modified by adding browser inspector screen to the display device (and changed it’s name from “handheld” from Backpack Radiation Monitor (03010700) flickr photo by IAEA Imagebank shared under a Creative Commons (BY) license

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Become a patron at Patreon!
Profile Picture for CogDog The Blog
An early 90s builder of web stuff and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person. And he is 100% into the Fediverse (or tells himself so) Tooting as @cogdog@cosocial.ca


  1. Thank you, Alan, for always taking the time to find and share alternatives. The whole Mozilla Withdrawal from Web-Making thing continues to vex me, because their tools were some of the easiest ways to show people a way forward to using the Web in inventive ways that have agency. I appreciate that you, and others, continue to show us other ways to get there, too.

  2. For the curious #myfest22, I use the Browser Inspector to “rewrite” web pages that I then screenshoot and image. Yes, it’s geeky, and you will see code, but this does what the old retired Mozilla Xray Goggles once did cogdogblog.com/2019/12/new-go…

Leave a Reply

Your email address will not be published. Required fields are marked *