Do You Use Firebug? You Should, Here is Why!
Okay so most of you on this site are Real Estate Agents and web development is probably not your primary job function. You sit at the PC late nights and early mornings doing a little tweaking here and there, maybe some SEO work as you have time. You cannot always afford professional help from WB Consulting, we understand.
But, there are tools out there that can help you dramatically speed up your ‘tweaking’ process in what little time you have to do it. That tool is called Firebug. Here is a quick little tutorial on how to use Firebug and what it can do for you.
Firebug 101
Okay so, what is Firebug, without re-inventing the wheel here, below is a description of Firebug from Wikipedia.
Firebug is a web development tool that facilitates the debugging, editing, and monitoring of any website’s CSS, HTML, DOM, and JavaScript; it also provides other web development tools. Firebug’s JavaScript panel can log errors, profile function calls, and enable the developer to run arbitrary JavaScript. Its net panel can monitor URLs that the browser requests, such as external CSS, JavaScript, and image files. The net panel can display both request headers and response headers for each page asset; it can also estimate the time each asset took to load.
Firebug is free and open source; it is licensed under the BSD license. Firebug was initially written in January 2006 by Joe Hewitt, one of the original Firefox creators. The Firebug Working Group oversees the open source development and extension of Firebug. Firebug has two major implementations: an extension (add-on) for Mozilla Firefox and a bookmarklet implementation called Firebug Lite. A cross-browser version is in development. Currently, the Firebug add-on has over 3 million active daily users.
In addition to debugging web pages, Firebug is a useful tool for web security testing and web page performance analysis.
Get Firefox and Install Firebug – in 5 minutes or Less
Okay so now that you know what it is, and that it is only compatible with Firefox, we need to be sure you have Firefox. As a web developer, hopefully you already have Firefox, IE, Safari, Chrome and even Oprah, yes Oprah is a browser (http://www.opera.com/) not to be confused with Harpo’s Oprah :).
To get Firefox, simply open your favorite browser, and Google Firefox or Mozilla Firefox. Download it and install the latest version. No images here sorry, if you are tweaking sites in your spare time, you can handle this ;).
So now that you have Firefox installed, how do you get Firebug you ask, easy? Simply open Firefox if you don’t already have it open and click on ‘Tools’ then ‘Add-Ons’. You should see a page like this one below, image-01.
image – 01
At the top right of this page you see the Search all add-on’s area, type in Firebug. Once you find it, simply click on Install and if it says it needs to Restart Firefox, allow it to do so, click on Restart if needed.
Side Note: Once you get Firefox under your skin and see how truly cool it is, with its hundreds of add-ons, refrain from adding too many. Add-on’s slow down the browser in some cases and running a lot will hinder Firefox.
Okay so you have Firebug installed and running, you know this because you now have a little ‘bug’ at the top of your Firefox screen, like the one shown below in image – 02.
image – 02
Okay, I Have Firebug, What Can I Do Now?
Well you savvy business owner, what you can do now is look at the code in your site, take a peek behind the scenes so to speak and even see what changes you need to make.
For example:
We recently added a new footer section to our WordPress web site. The site used to only have three footer sections and were now squeezing four into that space. The theme we use has too much padding, I don’t like how it looks now, but I need the extra footer area, so what can we do. Let’s take a look.
image – 03
Above in image -03, you can see our site with Firebug running (bottom half). The window in Firebug on the left is our web site HTML code. The window on the right is our web sites style sheet, or CSS code. Each section of CSS even shows you what CSS file it comes from (blue text on the far right, styles.css for example).
Okay, so see how much padding each footer area has below (red areas we have marked below in image – 04).
image – 04
We need to know what CSS element controls this area, or… padding. To see it in Firebug, what we need to do is use the inspect tool. This is the second tool from the left in your Firebug tool bar, check it out below in image – 05.
Step 01
To the left, we have selected the inspect tool shown in image – 05 and we are going to play with it a little, looking at what it can do. Select the tool then use your cursor and just move it over the web page above the firebug window seeing what turns blue and what gets highlighted. Play with this a little, you can’t hurt anything. Any changes made here are simply visible to you only, again this tool is a testing tool, remember.
Step 02
Below, again marked by the (1.) we turn on the ‘Inspect Tool’, then we use the mouse (not shown) to move OVER the page and highlight the second footer area of our WordPress web page (marked by the 2. On the image below). Lastly, we look at the style sheet code or CSS code that Firebug shows that controls this part of the page.
image – 06
Step 03
So what we see here is that the code that is controlling the “Yellow” area above is in the CSS code on the right side of the Firebug screen, shown below in image – 07.
image – 07
So let’s play a little with the “margin-left” setting. Why that setting? Well if you look above at image 06, you see the yellow area? That’s Firebug showing you the different elements of that code, one being the margin, the other being the width. I know that’s not obvious, but once you play with Firebug more it will be easier to see these things.
The Great Thing About Firebug
Okay so here is the awesome thing about Firebug, take a look at the image below.
Image – 08
Let’s start with item # 1 in the image above, the cancel or block icon, see it? It is the small round circle with the slash through it in grey. As you mouse over the different elements on the right, you will see this icon appear next to each line. If you click on the cancel icon (it will turn red), it essentially removes that line of code from the CSS string. This can be VERY handy in locating problems, or just figuring out which line of code you need to adjust.
When you do this, you will actually SEE the web page above CHANGE! That’s right, making changes in Firebug actually shows you in real time what your changes will look like or affect on the web site. Don’t worry; these changes are only visible to you. Remember you are not actually editing the file…. yet. If you like the changes, you can commit them to the web site by adjusting the file in which that code resides. This is again, the blue text to the right of the CSS element, in this case above, styles.css.
Note: If you put your mouse over the blue text or file name of the CSS file, Firebug will display the entire location of the CSS file for you, so you can open that file in an external editor if you like and make the changes you have created.
Making Changes – Summary
So let’s adjust the margin-left setting from 60px to say, 20px. To do this you double click on the ‘60px’ above and Firebug will allow you to change it. Be sure to keep all the syntax in place, that means the format has to stay the same, see below.
“ELEMENT NAME” then “ : “ “ATTRIBUTE” then “;”
margin-left: 60px;
Okay the change to 20px works well, and I think looks great. The next thing we have to adjust is the width of all the footer sections, all four of them. This is controlled by the width tag above under footer-fourth. Looks like 222 would be the widest we can go without causing some spacing issues.
Once we have made these changes and played a little more with Firebug we get the rest of the issues worked out that also changes with the initial changes we have made. But Firebug saved the day making these changes a breeze to manage and implement.
Can Firebug look at other web sites besides mine?
Sure! Does your competitor have a cool web site feature or function and you want to see how it works or view code behind it? Simply use Firefox to navigate to your competitor’s page, turn on Firebug and mouse over the feature you want to see the code behind, it is that easy.
When you are done with Firebug, just like with any window, you have a Minimize button, the dash (left red button), the Maximize button (middle red button) and the Close button (right red button). To close the window, simply click on the red ‘power’ button or the far right red button shown above.
If you have any issues with Firebug, please feel free to contact us here. If you would like a FREE consultation regarding web development, or SEO for your web site, please do contact us here, or feel free to call us at, 214-449-0488.
Hope you enjoyed the tutorial blog post and hope it helped you save some time on your next web site tweak.
Related Posts
WB Consulting is a boutique internet marketing firm located in McKinney TX. We are just a short drive from Allen, Frisco, Plano, Murphy, Richardson, The Colony and surrounding areas. If you are a small business owner and you are not actively marketing to mobile customers, optimizing your online pages and leveraging social networks for your business' gain, then you need to talk to WB Consulting. Our phone consultation is free of charge and we use this time to see if we can help you.
