Introduction to Firebug

This guide will help you install Firebug and show you certain tips or tricks that can be accomplished through Firebug.

Programs used:
Firebug - http://getfirebug.com/
Firefox - http://www.mozilla.com/en-US/firefox/personal.html

What is Firebug?
Firebug is a handy add-on for Firefox that allows you to edit CSS, HTML, and JavaScript in any web page. It can be used to reveal options on websites that weren't accessible to you before among other helpful things. At one point Firebug allowed you to change your channel type on Youtube to the exclusive Non-Profit or Politician types.

Installation

• Visit http://getfirebug.com/ and click the red button that says 'Install Firebug for Firefox'.
• When the Software Installation window opens, click on the Install button.
  
• Install Firebug and restart Firefox.
• After you've installed and restarted, you should see a little bug in the bottom right of your browser. This means that Firebug was successfully installed.
  

Tips and Tricks with Firebug
As said earlier, the number of things that you can do with Firebug is endless. Here are a few examples of ways that you can use Firebug to access previously inaccessible options.

Free Shipping
The first trick I'm going to show you is how to get free shipping on various websites. You may be stuck: you can either use an online coupon for free shipping or 10% off. This trick will allow you to reap the benefits of both!

• Visit the online store that you want to order from. In this example I'm going to use http://www.soccer.com/.
• Select what item(s) you'd like to purchase.
• Visit your basket and click the 'checkout' button.
  
• Fill out the required shipping information.
• When you get to the page that asks for your shipping method, right click on one of the radio buttons and click 'Inspect Element' at the bottom of your options.
  
• If done correctly, the following should be highlighted in blue:
  
  Now, this won't always be the same on all websites, though it should look something like this.
• What you need to change is the value. The value is the number assigned to each shipping method, so standard has it's own number along with all of the other kinds of shipping, including free shipping. Upon inspecting each element, I've found that standard shipping is value 1, express 2 day shipping is value 3, and express overnight shipping is value 3. What number comes after 1, 2, and 3 and would be our best guess as to what free shipping is? 4!
• Click on the number 1 in the highlighted text in Firebug and change it to 4.
  
• Minimize Firebug, select your edited radio button and press continue.
• Congratulations! In your order total you should see that no additional shipping cost was added to your order. You can now use your trusty 10% off coupon without having to waste your free shipping coupon.

Editing Text (Client Side)
The second trick is a lot less useful than the free shipping, but can still be used for personal enjoyment or fooling other people. Warning: If you do refresh the page the edited text will disappear, and you will have to change it again.

• Visit the web page that you'd like to edit.
• Right click on the text you'd like to edit and click 'Inspect Element'.
  
• When Firebug opens, click on the text you'd like to edit.
• Type in whatever you'd like the text to appear as.
• Minimize Firebug and look at the results.
  

Ordering a Product that is out of Stock
Aww, man! You were going to buy these awesome headphones, but they're out of your preferred colorway. Don't worry, this simple fix will allow you to order any style of headphones that they make. Keep in mind that they still are temporarily out of stock, and it might take longer to receive your item. For this trick I'm going to use Ear Pollution headphones on http://www.ifrogz.com/.

• Visit the website that you want to buy the out of stock product from. I'm going to use http://ifrogz.com/proddetail.php?prod=EPDJStyle.
• Pick what colorway / product that you want. I've personally decided on the Union style. Oh, rats! They're not available to purchase. But don't worry, we can fix that problem.
• Right click on one of the available styles and click 'Inspect Element'.
  
• Notice that there are several different option values for the headphones available. Keep in mind that other websites may have different values for their specific items. Upon further inspection, I've found the ID's for each style of headphones:
  
• Change the option value of the headphones you inspected to your corresponding option value. In my case, I'm changing it to 4934.
  
• Click 'Add to Cart' and observe the results! Congratulations!
  

Well, that it for now, folks. Remember that I've only scraped the surface of things you can do with Firebug, and I'm sure someone out there also has useful tips or tricks involving Firebug. If you have any questions, comments, or criticism, please post. Thanks!