Browser Inspector as the New Goggles

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.

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”

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

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

I'd like a Twitter Data partner to help with… (one can still dream, right?) pic.twitter.com/XGzGxdrXSX

— Alan Levine (@cogdog) December 12, 2019

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.

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.

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).

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