When you think of faked or edited screenshots, programs like Photoshop probably pop into your mind. I’ve never been very creative when it comes to design and graphical work, so that’s nearly out of the question for me. If you’re trying to swap faces in a picture, you’ll need to learn how to use programs like that. If you’re trying to do something like change the text in a Facebook conversation, there’s no need. All you need is Firebug and a PrtScrn key.

Firebug is available for every major browser: IE6+, Firefox, Opera, Safari and Chrome. In this example, I’ll be running you through a tutorial on how to use it for its native browser, Firefox. What is Firebug though? Firebug is a browser add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript. To manipulate webpages as I’m going to show you today, you won’t need to know any of those languages.

Installing Firebug

Installation is incredibly easy. Head on over to the official website to download the add-on. From there, select your browser (Firefox preferred, so that following along is easier). Install the add-on and restart your browser if necessary.

Using Firebug

Upon installing Firebug, by default, the icon should be displayed in your add-on bar, Tools menu, and possibly the context menu. Click on the icon in your add-on bar and you’ll see a new tab pop up at the bottom of your screen.

What you’re seeing here is an HTML view of the elements of the webpage you’re on. In this example, it’s the Firebug download page on Firefox add-ons. If you’re interested in using Firebug for the more usual purposes, feel free to poke around the tabs and get a feel for its features.

The button that I’ve highlighted in that screenshot is the inspect tool. This is the tool we’re going to be using. Click that button and then you’ll notice that every area of text that you hover your cursor over will become highlighted in the webpage view, and then highlighted down in Firebug’s HTML view.

Changing Text

Click on the block of text that you want to manipulate. You’ll see that the text has been selected in Firebug’s HTML view. From there, double click the line of HTML that includes the text you want to change. You can begin typing in whatever you want.

As you type, you’ll see that the preview updates live on the webpage.

Cool, right? It’s especially easy because of the way that Firebug allows you to isolate raw text from wrapped HTML. That way, all HTML elements, CSS styles, and other important visuals are preserved so that it looks like the real copy.

As you get more comfortable with Firebug, or if you already know HTML, you’ll find it just as easy to change other on-page elements, like images. The possibilities are pretty endless and I’m sure you’re already coming up with ways that you can use and abuse this little trick.

Let me know what you think about this little tip, and share your creative ways of putting it to use in the comments!