firebug web development evolved Firebug: Web Development Evolved

Listed by one tech writer as the one plugin for web designers to have if marooned on a deserted island, you’d have to have been stranded on such an island not to know about Firebug, the remarkable open source add-on for Firefox that lets designers examine, debug, and even edit the CSS, HTML, and JavaScript of any web page.

It’s tagline of “Web Development Evolved" might even be a bit of an understatement for a tool that lets you quickly select and inspect the underlying code of any element of any webpage no matter what platform. Originally developed for Firefox, Firebug is also available with slightly fewer features as Firebug Lite for other browsers.

 

Getting Started

Getting started with Firebug is as easy as downloading and installing. After relaunching Firefox, you’ll find the Firebug menu under web development of Firefox’s tools menu. From the Firebug menu, select “inspect element" and the Firebug window will appear at the bottom of the page you’re visiting.

 

FirebugMenu1 Firebug: Web Development Evolved
Click image to see full size

 

As you mouse over different elements on the screen, you’ll notice rectangles appearing around those elements. Simply click one around an element you’d like to know more about, and a wealth of information will be displayed about the element’s HTML, CSS, scripts and more.

 

ElementInfo2 Firebug: Web Development Evolved
Click image to see full size

 

Putting Firebug to Work

Let’s say you’ve made a change to a stylesheet that all links will appear in a bright bold red, but for some reason a link or two simply refuses to cooperate. Usually, this would mean digging down into CSS and HTML and reviewing line after line of code and experimenting with revisions to isolate the problem. Any designer knows what a frustrating process and waste of time that can be.

With Firebug, however, it’s a matter of simply clicking to select the element to reveal its underlying code. What’s more, Firebug allows you to edit the webpage live so you have visual verification when the problem is fixed. While changes can’t be saved on the screen, the code can be copied and applied to the actual design files.

 

EditExample1 Firebug: Web Development Evolved
Click image to see full size

 

A Web Designer’s Best Friend

Since web pages show changes in real-time, Firebug can be a tremendous asset in web design, allowing designers to change any part of a page to see how a change in text size, font, background color or even content will look. Once satisfied, the code can be copied and applied to the actual templates being used for a particular page.

 

copysource Firebug: Web Development Evolved

 

From Firebug’s layout tab, you can address CSS boxes that aren’t lining up properly and other layout issues with a visual breakdown of each element and the nested boxes around it defining border, margin, and padding. You can change those values to even move elements around on the page.

Designers also have the option to quickly copy code from websites they might want to emulate. Or they can see how their own design touches might look when applied to someone else’s pages. Ever wanted to be in the headlines? With Firebug, it’s easy to call up CNN.com or NYTimes.com and plug-in your photo and story.

 

Debug and Profile JavaScript

With its roots as a tool to assist with debugging JavaScript, HTML, and Ajax, Firebug’s debugger capabilities have grown with time. As a JavaScript debugger, Firebug sorts files into a neat list making it easy to find a particular script. When debugging, Firebug lets you pause execution any time on any line to inspect objects and their values at that moment in time.

 

debugging Firebug: Web Development Evolved

 

Firebug’s debugging options also allow designers to set conditional breakpoints and other parameters of debugging, continue execution one line at a time, profile JavaScript performance, and log JavaScript activity. There’s also an option to automatically break into debugger mode when an error occurs to help pinpoint errors as they occur.

 

javacommandline Firebug: Web Development Evolved

 

Monitor Network Activity

If your web pages are taking too long to load, Firebug’s network monitoring function can help determine the cause with several useful tools. A timeline shows relative loading time of files, so the order they load can be arranged to minimize a website user’s wait time.

 

timeline Firebug: Web Development Evolved

 

Firebug also breaks items down by type to troubleshoot particular types of files, provides cache status updates and provides a wealth of information on HTTP headers.

 

Firebug’s Continuing Evolution

With imitation being the sincerest form of flattery, both Chrome and Safari now come with web inspector capabilities with a continuing move toward incorporating developer tools. Mozilla has also announced it is working on its own built-in developer tools for Firefox, leaving many to wonder about Firebug’s future.

Long an open source program, Firebug’s future seems reasonably assured, however, recently becoming available on GitHub, meaning developers will have an easier way to work and collaborate on its continuing evolution.

About Eric Nacul

Eric Nacul has written 1 post on web design mash.

This guest post is written by Eric Nacul, a tech enthusiast who enjoys writing freeware reviews at BestFreeOnline.net



15 Responses

  1. sheri strykowski
    May 01, 2012 - 09:29 AM

    Firebug: Web Development Evolved http://t.co/duzhvQIA (WebDesignMash)

  2. Jamie Cresswell
    May 01, 2012 - 09:29 AM

    Firebug: Web Development Evolved http://t.co/bZCx9s0i

  3. Jamie Cresswell
    May 01, 2012 - 10:15 AM

    Firebug: Web Development Evolved http://t.co/s7CarSL9

  4. Artatm
    May 01, 2012 - 12:08 PM

    Firebug: Web Development Evolved:
    Advertise here with BSAListed by one tech writer as the one plugin for we… http://t.co/bTb1z1ou

  5. Yaaseen Fredericks
    May 01, 2012 - 12:26 PM

    Firebug: Web Development Evolved http://t.co/s7CarSL9

  6. Jamie Cresswell
    May 01, 2012 - 03:15 PM

    Firebug: Web Development Evolved http://t.co/C9Rbq71K

  7. Shadow Walker
    May 01, 2012 - 03:16 PM

    Firebug: Web Development Evolved http://t.co/oJ4Zd07Q

  8. serafimfromhell
    May 01, 2012 - 03:36 PM

    Firebug: Web Development Evolved http://t.co/C9Rbq71K

  9. bkmacdaddy designs
    May 01, 2012 - 04:00 PM

    Firebug: Web Development Evolved – http://t.co/KglT1E2g

  10. Jorge Landa
    May 01, 2012 - 04:01 PM

    Firebug: Web Development Evolved http://t.co/9n3bzPSa vía @webdesignmash

  11. Arthur Brown Jr.
    May 01, 2012 - 04:06 PM

    Firebug: Web Development Evolved – http://t.co/KglT1E2g

  12. Jason Glisson
    May 02, 2012 - 02:22 PM

    Firebug: Web Development Evolved http://t.co/IjUQos8H via @webdesignmash

  13. Jamie Cresswell
    May 02, 2012 - 07:16 PM

    Firebug: Web Development Evolved http://t.co/X1tb7q9i

  14. Jamie Cresswell
    May 05, 2012 - 02:15 PM

    Firebug: Web Development Evolved http://t.co/z0rGh6gh

  15. stooni
    May 09, 2012 - 06:30 PM

    Firebug: Web Development Evolved | Web Design Mash http://t.co/OUHojMRh

Leave a Comment