Firebug Is The Easy Way To View and Test Code

Firebug is an open source Firefox plugin that lets you easily view and edit code on the fly.  Once you download the free application, you can view the HTML and CSS of any website in an easy to read format.   Firebug allows you to click on individual website elements to see the code, which Firebug highlights.  This means that if you want to borrow an element from a website you don’t have to scroll through seemingly endless code to find it. There’s also a search field that allows you to find elements by code titles.

In addition to editing the HTML, you can also view how the CSS rules are affecting the element. There is also a computed side panel, layout panel, and DOM panel.  These allow you to view how the browser is interpreting the code, the padding and border information, and the document object model.

Firebug also makes trouble shooting easier by letting you edit the code in real time.  You can delete or adjust the code until you find the problem, enter in new code to see if it fixes it, and then exit without actually affecting (or ruining) the code.  This is a great feature for new developers.

Firebug isn’t perfect though. Each new Firefox update means a new Firebug update so you may be using a beta version if you just switched over.  Also, always viewing your site in one browser means you can miss errors found on other browsers.  If Firefox is not your preferred browser, Google Chrome has a similar service called Developers Tools.

If you’re interested in learning more about Firebug, you can visit their website at getfirebug.com or this article at sixrevisions.com.

Advertisements

Trackbacks / Pingbacks

  1. Session 7 : Info Architecture « COM585 - 30 November 2011

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: