Pinterest Stumbleupon Whatsapp
Ads by Google

fake website screenshotsWhen 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 How To Install Firebug on IE, Safari, Chrome & Opera How To Install Firebug on IE, Safari, Chrome & Opera Read More : 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 The Next Steps On The Road To Becoming A CSS Jedi Master The Next Steps On The Road To Becoming A CSS Jedi Master CSS is absolutely one of the most important technologies around on the Internet today, and while most people admit to knowing a little HTML, we are generally clueless about CSS. Last time I introduced you... Read More , 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.

fake website screenshots

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.

website screenshot

Ads by Google

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.

website screenshot

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.

website screenshot

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

fake screenshots

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.

fake website screenshots

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!

  1. Charlie Player
    July 30, 2012 at 10:25 pm

    nt better than chrome..

  2. hadaso
    July 29, 2012 at 5:19 am

    Basically the only thing you need to edit a page in the browser is to add the attribute contenteditable="true" in the element. Firebug makes it easy to add any attribute, including this one. However the "Edit page" bookmarklet from https://www.squarefree.com/bookmarklets/misc.html is an easier method.
    I use it combined with Firebug to prepare webpages before I print them (remove all the fluff, add my own comments and more).

  3. Elaheh Sadegh
    July 24, 2012 at 4:39 pm

    I used it for some other purposes like finding an image URL and etc. but I really didn't any idea that I can make fake screen shot by it ;)
    the bad point is that w have to know HTML , right ?

  4. Six
    July 20, 2012 at 2:13 pm

    Opera: View source, find/change what you need and 'Apply Changes'.

    I guess you really need Firebug for Firefox and IE.

  5. niaou
    July 20, 2012 at 7:16 am

    Google Chrome: just right click any element in a page and chose Inspect Element. Happy editing...

Leave a Reply

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