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.
PRASHANT KUMAR
.jpg)
0 comments:
Post a Comment