Firebug: Once you download the page, you own it

I’m going to geek out for a second.

Firebug is an extension for Firefox that I’ve been using for years. These days, most (maybe all?) modern browsers come with some sort of interactive console. It’s great for web development, because you can tweak HTML & CSS without reloading the page, come up with what you like, then copy and paste the resulting code back into your files.

I use Firebug beyond that, though. You see, when I’m viewing a web page, I have this mindset that it is living on my computer and I can do with it what I want. Think about big overlay ads on sites that block the content you’re viewing for X seconds. You can delete that entire element and go back to reading in seconds.

Today, I was reading up on a GPS photo logging device I recently purchased. It doesn’t seem to work. I was reading trying to read a blog post reviewing it, when I started getting too annoyed with a quirk in the page. See Fig 1.

You see those broken characters after every period?

No thanks!

Sure, I could just try to ignore them, but I’m too easily distracted. Instead, I opened firebug and typed out a line of Javascript, after verifying that the blog I was reading had jQuery installed. Within a few moments (I probably would have been done reading through the post), I had this:

wtf = document.getElementsByTagName(“p”); jQuery.each(wtf, function (index, val) { jQuery(val).html(jQuery(val).html().replace(/Â/g, “”)); });

To break it down, I’m creating an array of all paragraph tags on the page, then looping through them and setting their HTML contents to be their original HTML contents with the strange characters replaced with nothing.

While the blog post didn’t have anything to help me get this device working, I figured it was worth sharing the creative use of Firebug.

Another recent creative use of Firebug was browsing Google Maps with my friend Ed and hearing him say, “Man, it’d be cool if we could see just the dots, without the map.” I fired up Firebug, poked around, and deleted the image tiles below the points. The result? Fig 2.