Firefox as an IDE

Although I prefer IE7's native speed and feel for day-to-day browsing chores, there's no doubt that Firefox is my primary web development IDE.


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2007/04/firefox-as-an-ide.html

There is an IE Developer Toolbar Beta available to have some functionality in IE7:
http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038displaylang=en

Doesn’t nearly has the featureset of firebug, but anything is better than nothing :wink:

Cheers

Good recommendations, I’ll check 'em out.

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.

I use both of these tools and love them.

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 :slight_smile:

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.

Here’s a few tips for WDE; I use this method all the time to tweak and touch up CSS layouts.

  • Use the “Outline | Block level elements” button to outline all the DIV tags. On a site with modern layout, everything is DIV, so this is essential.

  • Use the “Information | Display Id Class Details” button to show the names of all the block elements you just highlighted.

  • Use “CSS | Edit CSS” to begin editing the CSS with these visual and textual cues and you’ll be hacking out layout in no time.

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.

The latest version of Internet Explore Developer Toolbar Has lot to offer Check out here http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038displaylang=en
My personal favourite are :

  1. Colour Picker
  2. Cache Related Tool
  3. Real Time HTML control properties and css properties setting in a property grid.
  4. Image Report

My sish list would be a real time javascript debugger and F1 help connected to MSDN.

I love Firebug!

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.

Firefox is a great development platform.

Another very useful web debugging tool is Fiddler:
http://www.fiddlertool.com/fiddler/

Its essentially an HTTP proxy that lets you inspect traffic between your browser and a host site.

I at first thought it said “Firefox as an IED.” That would have been interesting.

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.

:stuck_out_tongue: (sorry, couldn’t resist).

Possibility for IE7: IE7pro (http://www.ie7pro.com) in combination with FireBug Lite (http://userscripts.org/scripts/show/8291)

Tip for IE7 developer toolbar: when using “select element” be sure to have opened the DOM view. It prevents IE from crashing… :frowning: