How To Create Fake Website Screenshots With Firebug

Affiliate Disclosure: By buying the products we recommend, you help keep the lights on at MakeUseOf. Read more.


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 10 Simple CSS Code Examples You Can Learn in 10 Minutes 10 Simple CSS Code Examples You Can Learn in 10 Minutes Want to know more about using CSS? Try these basic CSS code examples to start with, then apply them to your own web pages. 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 [No Longer Available]. 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

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 [No Longer Available]. 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!

Explore more about: HTML, Mozilla Firefox, Screen Capture, WYSIWYG Editors.

Whatsapp Pinterest

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

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

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