Web Design Tutorial: Installing and Using the Firebug Addon for Firefox and Chrome -HD-

Today we are going to be taking a look at
a very helpful tool that all web designers and developers should be familiar with. Now this tool is called Firebug, and is an
addon for Firefox. Now don’t worry, they also make a version
for Chrome as well as other browsers. So to get started using Firebug, you can go
ahead and just Google “Firebug” and then click the first link entitled “getfirebug.com.” So once you get to the Firebug site, go ahead
and click the big red “Install Firebug” button and then click the download link underneath
the first heading. Now this link will take you to the Firefox
addons library where you simply need to click “Add to Firefox” and then go ahead and click
to install the plugin. So since I already have Firebug installed,
we can go ahead and jump right into its use. So after you have Firebug installed, you will
see the bug icon in your toolbar. Go ahead and click on this to bring up the
Firebug interface. Now by clicking the bug icon, you can choose
settings about Firebug like if it will be inset into your window, or if it will be a
detached window. Now the real magic of this plugin comes when
you click the blue pointer arrow and then hover over the page. You will immediately see each piece of the
page. You can also hover over the code in the HTML
tab to see the full area that that piece is taking on screen. Now tags are indicated by the blue overlay,
purple shows the amount of padding that an element has, and yellow shows how much margin
it has. Now after you click on an element, you can
also see in the style menu on the right side of the page that you have all of the CSS that
is being applied to that current object you have clicked on. Now the beauty of Firebug is that you can
turn these CSS properties off and manipulate them live in Firefox for troubleshooting without
it actually affecting the website. So feel free to go ahead and click next to
a property to turn it off, or to click on a value and edit it. You can also select and element in your HTML
view and just hit the delete button to delete it from the page. So now again, there is no need to worry because
all of the changes you’re making with Firebug are temporary. Simply refresh the page and you can set everything
back to normal. So now I mentioned before that you can also
get this plugin in Chrome. So in Google go ahead and search for “Firebug
for Chrome” and then go ahead and click the first link and then just install this through
Chrome. Now the Chrome plugin works very similarly
to the one in Firefox, and you can get started by going ahead and selecting the HTML tag
and then start inspecting elements by clicking the inspect button, which is slightly hidden
on my window. So if you do web design or development, go
ahead and download this addon if you aren’t currently using it. You will definitely thank yourself later. So as always if you enjoyed this tutorial,
be sure to subscribe, rate, comment, and share it with your friends.

Be the first to comment

Leave a Reply

Your email address will not be published.