Using Firebug to Improve your Web Design Skills

Jul 12, 2012
CSS HTML
178 Shares
By

Have you ever come across a beautifully designed website and wished you had X-ray vision to see how all those HTML elements on the site work? Have you ever wanted to see how a certain design might look on your site without actually changing the underlying code?

Well, you don’t have to wish or think anymore because a powerful and really useful browser extension called Firebug can help you do all that. Any designer or developer looking to experiment with different styles on a website in real-time needs this tool. The Firebug tagline, “Web Development Evolved” is exactly what the plugin has done in the Web development circles. It is a tool that non-developers will also find invaluable.

Edit Attribute Values

Firebug allows users to inspect <div> tags and change their attribute values. Any change made to the code is immediately visible on the browser window. Firebug works by allowing a user to either click on the browser window elements directly, which in turn, highlights the code that renders the element, or click on the code which highlights the browser elements. This is a useful functionality that allows a user to visualize and resolve float problems and padding or margin issues by simply changing the numeric values or properties associated with those elements.

Debugging JavaScript

Firebug JavaScript debugger allows you to pause executions and measure performance to find bottlenecks. Running inside the browser window has its advantages as well. To debug JavaScript with Firebug, simply launch the Firebug console and go to the “Script” tab from where you can set the “Breakpoints”. Navigate to the “Breakpoint” window on the right panel and click on the appropriate browser window element to activate the code. The execution should stop at the breakpoint that you set.

Similar to other debuggers, you can then use the buttons on the Firebug toolbar to “Continue”, “Step Over”, “Step Into” and “Step Out” during code execution. If you choose, you can let Firebug give you the option to break automatically when an error occurs so you can examine the conditions responsible for the error.

Edit HTML in Real-Time

If you are the sort of user or developer who likes to do quick in-browser tests without having to login or get authorization to access the HTML files, Firebug again comes to the rescue. The ability to edit HTML within the browser window is especially useful when working on a website you don’t own. Firebug allows you to add and remove HTML elements, class or ID to elements and add temporary inline styles. For example, you can test the styles below to see which works better on your site:

style = “color:#FFFFFF”

or

style = “color:#FFF000”

Always have an HTML editor handy to copy your code since Firebug does not allow you to save the changes. Once you refresh the page or click on a link, all the changes you have made disappear.

Editing CSS on the Fly

For Web designers, CSS is where all the action takes place and learning how to edit CSS properties gives you the ultimate control over how your website looks. Highlighting an HTML element automatically highlights its CSS on the left panel with the most recent declarations appearing at the top. Any inline styles will also be displayed at the top as “element.style”.

Firebug shows clearly what CSS properties are affecting the selected HTML element. Those that have been superseded by another declaration are crossed out, meaning that that rule has been overwritten by another rule which came after or has the ‘!important’ designation. That however, is not the end of the road. You can actually edit the CSS right inside the Style side panel.

CSS properties and values can be disabled or added that affect the web page in real-time. Any inline style that you add will not appear on the Style side panel but its effect will be visible on the browser window.

Try out Firebug and see how it works out for you. If you are like me, you can also use it to prank your friends by editing a popular web page and watching their reaction.

  • http://twitter.com/Lucanos Luke

    The CSS colors in your example code are incorrect. Should be 6 (or 3) hex characters, not 5.

    • http://twitter.com/DavGit David Gitonga

      Hi Luke. The CSS colors are now in 6 hex characters. Thank you for noticing.

  • Christopher Takakura

    The CSS color is indeed incorreect.

    • http://twitter.com/DavGit David Gitonga

      Hi Christopher. The color values error has been corrected. Thank you for noticing.

  • http://twitter.com/DavGit David Gitonga

    Thank you everyone for noticing. We will make the correction.

  • http://twitter.com/DavGit David Gitonga

    Just wanted to add that I personally use Firebug when I need to show a site owner how the site might look when I apply the recommended changes. Its a valuable tool for demonstrating site layout changes or other elements without touching the actual code.

  • http://twitter.com/DavGit David Gitonga

    Hi Brian. We decided to correct it anyway. Thank you for noticing.

  • http://twitter.com/DavGit David Gitonga

    Hi Szaboka. The color hex values are now in 6-digit. Thank you for noticing.

  • http://twitter.com/DavGit David Gitonga

    The CSS color error has been corrected. Thank you all for noticing.

  • samuel.woodbridge

    It’s a great tool. I use Chrome while developing so I use the inbuilt editor but it’s essentially the same as firebug it has all of the same functionality. I’d be quite surprised if any serios web designer/developer didn’t know about this incredibly useful tool!

  • http://twitter.com/sroussey Steven Roussey

    Thanks for the writeup. And now there is a new version! 1.10 — http://blog.getfirebug.com/2012/07/13/firebug-1-10-0/

  • http://gocreations.gr/ Go Creations

    Firebug is a great tool….saves web designers time …..

  • coolajax

    It’s not only a great tool for designer but also awesome and hand tool for web developer.

  • http://twitter.com/ExtremeWebPro Extreme Web Pro

    Firebug is Awesome! It helps me design all my client websites

  • http://www.blackbookoperations.com/ Black Book Operations

    This tool is indeed extremely handy. I used to only look at the sourcecode (which already helped out a lot of course) but with the latest updates in firebug as a developerstool, it has been great in pinpointing certain css issues or just trying to find out how certain elements inherit their values. All in all, I like to use it, and it has helped me understanding how other designs work as well. an absolute must (especially if your just beginning to grasp the vast landscape of CSS and HTML coding)

  • davidchavezs

    nice