Firebug - Dream or Nightmare?
Firebug is a new Firefox extension which gives developers a slew of amazing source viewing and editing power, but will rippers use the benefits of the program for their own monetary advantage? We discuss the benefits and possible downfalls of this excellent plugin. Is it a dream and nightmare for developers all in one?
What Is Firebug?
Firebug is a new Firefox extension that is still in beta, but presents a host of excellent features and time-savers for debugging code. Firebug is built by Parakey Inc, which if you haven’t heard is the source of some web based magic being built by a few members of the Firefox Team and friends.
The Features
The features of Firebug undoubtedly takes your normal “View Source” and “Dom Inspector” and ups the ante, allowing you to do a whole lot more simply by calling up the tool on any web page.
The features, according to the Firebug site are as follows:
- Inspect and Edit Html
- Tweak CSS to perfection
- Visualize your css
- Monitor Network Activity
- Debug and Profile Javascript
- Quickly Find Errors
- Explore the DOM
- Execute Javascript on the fly
- Logging for Javascript
Quite a hefty list of features for an extension with a download size under 300kb. Let’s dig a little deeper.
Looking Under the Hood
Firebug is mostly all about helping the developer spot problems and get them fixed in a live environment, right from the browser window. The features of Firebug do so much to aid, it’s definitely an essential for every developer.
The first tab you are presented with when bringing up FB is the HTML Inspector.
The HTML inspector lets you expand every element of a design, eventually exposing the entire markup of the site from top to bottom. You can edit the html directly in Firebug. At the same time you have an element selected, for example a div called “main”, you see the corresponding css for that element right to the right of the source window. A very convenient way of viewing and editing code side and css side by side. Firebug allows shows you a visual representation of the element you may be hovering over, based on css. In the screenshot below, we happened to be hovering over the navigation div.
The next tab you’ll find is the CSS inspector. The CSS inspector will pull a sites entire stylesheet no matter where it may be located. Good for developers, but bad for those who want their original designs kept safe. While of course, it’s not like any old “View Source” wouldn’t simple give away the location of the stylesheet, but that fact that it’s right there in front of you makes it even easy for beginners to have a look at your code.
Firebug also contains a script inspector, which, even though I don’t write Javascript, I believe it would be extremely useful in debugging problems with Javascript code. There is also the usual DOM inspector.
Finally, there is a nifty features which allows you to break down the total requests a site makes and determine exactly which element(s) are taking the most time to load. This can be extremely helpful when you find your site taking ages too long to load, but you’re unsure what query could be causing the slow pace. The Network Monitor can help you determine where and what the problem(s) is/are.
Want an avatar? Get a gravatar! • You can link to this comment
Thanks for covering Firebug. A clarification about this: “Firebox is built by Parakey Inc, which if you haven’t heard is the source of some web based magic being built by the “Firefox Kid” himself, Blake Ross.”
Joe and I are the cofounders of Parakey, but Joe is the creator of Firebug (not “Firebox” :).
Want an avatar? Get a gravatar! • You can link to this comment
Sorry about, fixed
Kick ass tool by the way. Maybe you’d be up for an interview right before Parakey launches whenever that might be. Just throwin’ the idea out there
Want an avatar? Get a gravatar! • You can link to this comment
Firebug is such a great tool! I can’t believe I ever made websites without it (sorry BBEdit). I’d say the drawbacks to people ripping off code are almost not worth mentioning. If people want to “steal” my code and claim it’s theirs, I don’t care. If I have any sort of reputation in the community, people will know the work is mine. If it’s content they are stealing, I’ll let copyright laws and crawlers work that out.
Want an avatar? Get a gravatar! • You can link to this comment
No offence but it’s hardly a nightmare for designers. Finding a CSS file is hardly rocket science. I think you might have got a little to carried away there with the article.
It sounds like a neat little tool though.
Want an avatar? Get a gravatar! • You can link to this comment
Why is it that most developers are all for open source and sharing code resources and all designers think they have some big magic secret to hide?
I’m sorry but worrying about developers (the people the created CSS) taking your basic CSS code thats easily created within any CSS capable editor is laughable.
The only nightmare for the designer is that one of 1 billion other sites may have a similar style. Oh no!
Want an avatar? Get a gravatar! • You can link to this comment
It’s a useful tool for developers, but also those wanting to get up to scratch very quickly with how xhtml and css combine.
Sure, it might encourage some to tweak designs but that’s all part of the learning process. Bottom line: the majority of web users aren’t that interested in code. People wanting to learn CSS will benefit from the insight it gives, but it’s not going to teach you how to design a site from the ground up.
It’s a nifty piece of software.
Want an avatar? Get a gravatar! • You can link to this comment
I very much agree with Ryan. I’ve personally taught myself HTML, CSS, PHP, and now Wordpress CMS integration all by viewing code and reading tutorials online. The fact of the matter is that if someone has the will to “rip” a style, they will file thru and find the image links, the css and js files too.
To my understanding, code, is not copyrightable in the sense of markup languages using it to display a page…Clearly if it was, designers would be strapped for creativity.
Want an avatar? Get a gravatar! • You can link to this comment
Like Joe above mentioned, making things easier for someone with the intention of ripping code is not enough to justify your title ‘dream or nightmare’