When I want to code my UI for any reason, I always reach for NVU. I’m not positive what its license is, but I’ve never paid a dime for it and it seems to be based off the FireFox rendering engine.
By far the most useful thing about Firebug is evaluating javascript expressions in the console. Being able to write javascript and instantly see what will happen because of it is a huge advantage.
I usually still use WDE for editing CSS, because I feel the CSS editing in Firebug is a little clumsy at best.
Firebug is a like a really good book. Sometimes you just wish you would forget about it so you can go back to the time you first read it and discover it all over again.
The only drawback is that I need a bigger monitor. When I’m seriously debugging a site, I will commonly have both WDE’s CSS editor open, as well as Firebug. It takes up a lot of the screen when I’m also trying to see what the site will look like at 1024.
But if it means the boss buys me a new monitor, then I guess it’s not a problem after all
Out of curiosity, what’s WDE do that Firebug doesn’t? Firebug offers realtime HTML and CSS editing among its other features, so it seems odd to use another tool to do that.
I’ve been using Firebug for…quite a while, and I absolutely love it. I would go so far as to say that it is the single-most important web development tool I have, bar none. Doing any kind of Javascript debugging, CSS work, or AJAX development without it is an exercise in pain. I can’t recommend it enough.
I just re-read the article, and you asked for favorite tips, so here are mine.
The “Inspect” button. Most useful feature in the whole suite, in my opinion. Select it and mouse over elements in the page to see their bounds (which is useful when building a layout), and click an element to pull it up in the source tree, and gain access to, among other things, its Style definitions. Firebug makes debugging CSS a dream - you can see all the style declarations that apply to the selected element, which file they originate in, and whether or not they’ve been overridden by another declaration later on (overridden styles have a strikethrough). This is utterly invaluable in trying to trying figure out why a style won’t apply to an element - it makes tracking down conflicting declarations beyond trivial. If you are doing any kind of in-page Javascript, it is invaluable. You can inspect elements in realtime to ensure that changes you’d expect to be applied via Javascript are in fact being applied.
The “Net” tab is stupidly useful if you do any AJAX work. Gone are the days of putting a textarea into your page to dump the results of an AJAX request to see if it came through alright - you can just click the “XHR” tab, and see any AJAX requests, their return status, and even pull up the results of the request in another tab (right click an entry, open in a new tab). If you just want to view the response inline, expand the line item and click the “Response” tab header in the expanded body. Instant source.
The Net tab is also useful for debugging site load times. It can help you identify resources that are slowing down the site, allowing you to optimize them or factor them out. I recently performed load time analysis on a new product we developed at work and was able to make recommendations that cut load times by about 40% based mostly on the data we got from Firebug.
There’s plenty more, but those are three of the most unique, useful uses, in my opinion.
I’ve found IE’s Developer Toolbar to be equal to, and in some ways superior to, WDE on Firefox. But nothing in IE-land can touch FireBug. It’s da bomb.
I can’t imagine my life without Firebug. It has changed the way I develop for the web so drastically, I would consider it the greatest addition to a developers toolkit since the compiler.
I recommend Firebug to everyone, and when they see me use it after describing it, they all become instant believers.
I guess I should go donate some money to the project too.
Jae: Good guess, Nvu is based on Gecko, like Firefox family.
For people who use Firefox day-to-day, I’d also recommend keeping around multiple Firefox profiles. I use one profile for development that has these extensions and quite a few others, another for day-to-day browsing with my bookmarks preferred keybindings, plus a final “plain” one I use to make sure sites work with default settings. Firefox isn’t flawless, but with With XUL extensions, Firefox has hit a sweet spot between extensibility and out-of-box usefulness.
I installed both the extensions installed for a long time and firebug is really amazing as it saves so much time in javascript debugging. The time I used to spend in debugging javascript errors in IE looks like a bad dream now. This extension is a must for web developers.
I use firebug. I will start using the Web developer extension, Thanks for the information.
But, day by day internet explorer 7 or Mozilla 2 both consumes more memory and also, the loading time of the window is slow.
This extensions work well together because they help you in different situations. For instance, you can use WDT to control cache and cookies, outline all elements on page, show rendered source etc. This features are really important, but I don’t need them all the time.
On the other side Firebug has the tools that I do need all the time - interactive console, tool that shows me how styles are applied to specific elements, HTTP requests and responses and so on.
I cannot live without these extensions now… I generally use Firebug to find out about the document (JS console, DOM inspector, CSS listing etc)… and use the Web Developer toolbar for actions like removing the style sheet and passing the current page to the validators.
Personally I feel they work well together, and use one more than the other depending on I’m doing at the time.
However, the IE toolbar… sorry, I wasn’t that impressed… it helped me understand where the rendering engine was going wrong a couple of times, but it still has a long way to go… like the browser.