Very useful tools.

I always use FireBug and Web Developer.

FireBug has helped me on many projects to crease out the bugs!

The Safari (WebKit) Web Inspector is much different than the link in the article provides. A more recent overview can be seen at Link [webkit.org]

It keeps getting better and is beginning to approach Firebug usability. The most recent build has the Inspect Element contextual menu item missing which reduces it’s convenience greatly. You can still invoke it from the menus when you enable the debug menu. I hope it returns soon.

Safari’s Web Inspector has been redesigned, the mentioned feature set and screenshot taken are way too old. Take a look at this blog post by Dave Hyatt: Link [webkit.org].

Great list!

I have to look at a lot of websites in other languages so I use the Link [addons.mozilla.org] add-on for Firefox. Really handy to translate the whole page in one click.

FireBug has saved my life countless times…..it has even saved my marriage.

Who-da-thunk-it!

I use Charles (http://www.charlesproxy.com/) over fiddler, its a lot better!

Fiddler is not an IE extension, it is a stand-alone application.

FIREBUG! I love you.

I cant exist without Firebug!

Nice reviews, although I still use Photoshop for grabbing color codes, part of my habit :)

Another one who can’t live without Firebug. I’ll give a try on the other ones.

Check out Link [karmatics.com] for Firefox :-)

Great post, as usual!

Did not notice the RSS icon… awesome!

webdeveloper toolbar for color info

Forget FireBug. It’s really only great for JS debugging or hacking sites that use hidden inputs or JS to validate forms.

Web Developer is the best FF addon ever created. All I’ll say is hot keys. Check them out.

FireBug is the best tool out there! It has saved me who knows how many times!

measureIT is quite usefull tool too.

Wow… pretty shweet!

too bad fireshot not avaliable for linux, i’m using abduction to take screenshot
use aardvark to view site layout

Another great tool is HTML Validator / HTML Tidy which is available for FireFox.

I find it must more convenient than the validator built in to Web Developer.

While not my favorite one tool I think deserves to be on this list is pencil.

Firebug is definitely my favourite. It might’ve also been worth mentioning that Opera now has Link [www.opera.com] which offers similar functionality to Firebug and Webkit’s Inspector.

FireFox - WASP

Web Developers, FireBug/FirePHP and Colorzilla are my favorites, but I’m going to install a couple of this great list. Thanks for sharing!

Am allready using FireFTP , FireBug and the Web Developer toolbar and I have to agree they are awesome to say the least ^^

I like Westciv’s bookmarklets Link [westciv.com] and Link [westciv.com]. You don’t have to install anything. Just have an Internet connection.

i really love firebug! since i’ve known it, i never let it go :)

Another useful accessibility plugin is the WAVE Toolbar, which provides similar functionality to WAVE’s online web accessibility checking service, but can be used on your own machine.

Link [wave.webaim.org]

Great post.

I am already using Fire bug, Web developer, fire shot & Internet Explorer Web Developer Toolbar. Thanks for providing information about other Internet explorer related development tools.

I just installed Debug Bar for IE. Its good 1.

really nice list :D

Opera DragonFly, it’s alpha software, but it deserves a mention.

+1 for measureIt. Very useful when getting your layout right.

Where’s DragonFly?

firebug, web developer and fireftp…ive always used them…now im gonna fangs…will help me restructuring my site…thanks

HackBar is a great way to manipulate complicated URLs interactively. Modify Headers, while imperfect, has been handy to access name based virtual servers, but you do not have the required DNS records in place to access the server by name.

A fantastic image optimizer is smush.it! (http://www.smushit.com/) which is developed by developers at Yahoo. It does as advertized and goes beyond images optimized in Photoshop. To run this tool, you will need to install Firebug first (as smush.it! is a firebug extension).
The amount of memory shaved off of images varies, but for those who want to squeeze the most out of an image file size, the savings can add up. Sites with heavy traffic can benefit from having images site-wide reduced in file size without any image quality compromises.

My mistake… smush.it! is not a firebug extension. It is simply a Firefox add-on.

I’d easily marry Firebug! FireFTP is also an awesome addon.

Christian

Interesting to know that extensions were available for IE now. I use Web developer, FireFTP, ColorZilla & ScreenGrab for Firefox on Linux.

Fireshot is good but is available for Windows only.

I also use firebug/YSlow, webdeveloper, colorzilla, & measureIT. But there is also Screengrab!. It allows you to copy selections, viewport, or full pages and paste into photoshop. no saving to the desktop and dragging to PS. I hate creativity droppings on my desktop.

Firebug is Best

i love firebug! without this little plugin i would often get MAD!
web developer bar is the perfect combination for firebug!

Plugins like fireFTP are really good, I hate installing standalone programs for every tit bit.

Firefox is a real swiss army knife.

Hi!!

I love firebug and webdevoloper, I think I can’t live without those plugins

very useful! thank you

horray Webdeveloper! firefox has more addons than IE

very useful article - thx a lot!

I always use firebug, it is very useful and handy :)

Colorzilla, can’t live without it :-)
Second best would be Measure-it! :-)

«tails export» for microformats

Awesome list. Thanks guys :)

Scrapbook is also an amazing extension to capture html pages (better than “save a”s)

Firebug is without a doubt the most used developer tool that I have installed. I would sacrifice my text editor of choice (with syntax highlighting and tabs etc) for notepad just to use Firebug. Web developer is then second for me as its provides a large range of options. Also Show IP is useful for me as it allows me quickly see what server I am working on when on a development or staging server.

Dummy Lipsum is a very handy little Firefox extension. It does just one thing, but the one thing it does is extremely handy if you’re developing an application with a lot of forms. It simply allows you to right click on a text accepting element (a textarea, line input control, etc) and populate it with Lorem Ipsum text. When you’re testing a web app and need to repeatedly fill in the same form over and over again I can’t tell you just how much time this little plugin saves!

Cool nice! I use Firebug and Web Developer also. :)

JHAY

my favorite tools in G Chrome browser , reaaaally cool things only for debugging but not a good browser.

I like the fire bug!

Don’t forget about the Link [www.westciv.com]… it’s fairly limited, but a good option for debugging IE6.

Tyler

Erm, the url you posted to webkit is from 2006… Its 2008 now. thats a 2 years old article…

I suggest you link to this post instead: Link [webkit.org]

You forgot Dust-Me Selectors, IE Tab and Mozilla Accessibility Extension. But my favourite has to be Firebug. I can’t even remember what it was like before Firebug.

Definitely Firebug.

I also use HTML tidy, which has a plugin for Firefox. It provides you with a simple view of validation errors and also gives a more detailed view of the exact problem on each line. There are other tools that do the same things, but I just find it really useful: Link [users.skynet.be]

Tamper Data is a little bit more powerful than Live HTTP Headers.

Is there anything out there where you can edit the CSS of a website in IE7 and IE6? Just like you can with the web developer extension in Firefox??

I would definitely say FIREBUG!
I am sure it has saved me 500h+ of developing time!

very handy for every webdeveloper: the w3c validator plugin for firefox!

Firebug, FireFTP are essential to how I work. I used to use Web Developer Toolbar a lot, but that’s changed since Firefox 3 went and broke the keyboard shortcuts :-(

Another mention should go to ScreenGrab. I frankly cannot live without it. Invaluable for sending whole page screen shots of a site that is being designed/developed.

Not a truly web developer based plugin - I found using Pencil to be very useful for mocking up forms and dialogs. At the very least you don’t need any image manipulation apps - just Firefox.

FireFTP, ColorZilla, MeasureIt, Firebug, Webdeveloper extension

I code websites just using Firefox and Notepad++, all freeware and a lot handier than all those heavy, expensive wysiwyg web-editors

FireBug and Web Developer and screengrab (good for making fast screenshot) and iMacro

I use Web Developer :D
Great list by the way ;)

I like httpfox. It is similiar to httpwatch but it is a free addon for FireFox.

Xray is indispensable:
Link [www.westciv.com]

It’s a bookmarklet that, when activated, describes any element you click on. Awesome!

Web developer, any day

My favorite is firebux :X

Man, seriously, enable the function to make small posts in RSS

Good list, the few firefox addons that I’d add that weren’t included in the list are:
Selenium
Pencil
HTML Tidy
Obtrusive javascript checker
Measureit

Installed FireShot and ColorZilla after reading this article, thanks!!!

Nice article,

Link [addons.mozilla.org] for Firefox and Link [www.bayden.com] for Internet Explorer.

Been well into firebug for a while… recently got into using Link [www.firephp.org]. Its awesome for php developers, especially php developers wanting to debug their ajax (or ajajson) applications.

Three words: “Link [www.visionaustralia.org.au]”

Not sure if this has been mentioned yet but, if everyone used this when choosing their colour schemes the web would be a better place.

The tool allows me to check and compare foreground and background colour contrast inline with checkpoint 1.1 of the WCAG v1.0.

If someone was to integrate this into a nice, easy to use, Firefox Add-on it would be awesome!

You can easily add pixel perfect to firebug :

“Pixel Perfect is a firefox firebug extension that allows web developers to easily overlay a web composition over top of the developed html. Switching the composition on and off allows the developer to see how many pixels they are off while in development.”

These are great, I thought I knew about all the good ones but apparently not. Like debug mode in Safari/Webkit, there’s also a lot of other great tools that Link [www.nuttersmark.com] that I take advantage of. I didn’t know Webkit had a debug mode that was different than Safari, I’ll be checking that out this morning.

Nice list, thanks for sharing.
I would add Link [addons.mozilla.org]

Thank you very much for this!

Firebug allows me to edit the CSS and HTLM and see the changes instantly.

Can Web developer do that? I have not seen the ability to edit the CSS directly in browser with Web Developer or IE Developer.

IF anyone knows how please tell me. Thanks!

I use Firebug, web developer toolbar, fiddler, liveHttp headers, fireFTP. I would try to use other tools mentioned in here as well.

If you are familiar with Firebug and love its features then the IE Developer Toolbar is a big let-down. You can’t manipulate the DOM or HTML, it does not improve error messages (wish it did!) and it doesn’t give you load times.

Firebug is much, much better. IE is a slacker…

@Justin Web Developer lets you edit CSS and HTML on the fly as well. Load the toolbar and the options will be included in the CSS drop down and the MISC dropdown. CTRL + Shift + E for the CSS

I used alot of the plugins mentioned but can’t live without Web Developer or FireFTP. Also along with FireShot, ScreenGrab! is a must have.

Great list!

I use WebDeveloper, Firebug and Colour Contrast Analyzer

I’d like to add CSSViewer, HttpFox and Screen grab! to the list.

CSSViewer: Activate it with a button, hover over your website and get the resulting CSS for the specific element in a layover. Great, because it is fast (at least faster than activating Firebug/WebDeveloper)!

HttpFox: Fiddler in Firefox

Screen grab!: Another great screenshot tool for a quick shot…

This is a great post, and I either have used most of these or currently use them. My set up right now is: Web Developer, Firebug, Colorzilla. They are all amazingly useful, However i am still missing one part that I would like to find, Is there any way to fully integrate the web development into the browser: I.E.: edit and upload all from Firefox, so i can minimize the alt + tabbing? I will implement the FireFTP for the upload part, but is there a solution similar to firebug that will allow me to edit the files from Firefox as well?

IE Web Developer Toolbar is a little hokey compared to firebug. Firebug Lite can be be used to view page elements in a more “Firebuggy” style. Its basically a javascript include that you drop into your page. Not the greatest solution but definitely better. Or you could just forgot about IE altogether :)

Great list. I’m already using most of these tools, and will definitely try out the others here. Firebug,Web Developer, Yslow, and Fire FTP have changed the way work dramatically

Great list! With all the lists out there this one stood out for me and actually introduced me to something new and useful to my set-up.

Thanks!
db

Very cool post. Thanks for the info.

I’ve been using Link [www.gscottolson.com]. It’s a neat javascript widget you can include on your page to send console messages to during development and it works on most browsers.

Thanks!

excellent collection. I use FireBug, but didn’t know about YSlow. Will definitely be give it a try. Dugg.

@Gabe Diaz - Thanks Gabe. I just started playing around, but I find it is not as easy to use as firebug. I could not select the individual cell with the inspector and then edit the css in the same window. It’s in two seperate windows. I would have to search for the tag and edit.

Firebug rules all. I just wish IE Developer would allow me to edit the CSS to help my browser testing. God how can they suck so hard when there are so many good examples of how to do things.

ahah…

My favourite development tools for firefox are:
ColorZilla
CSSViewer
HTML Validator
IE Tab
MeasureIt
Screengrab
and finally Web Developer Toolbar

I think Opera Dragonfly should be listed at the top of this list. It’s much more better than Firebug.

Many of you are using multiple tools that are capable of doing the same thing. The Web Developer Toolbar has a ruler that gives measurements (you can drag+drop, and resize to the specified places to determine everything MeasureIt does)…someone said that either WebDev toolbar or Firebug has a color picker (haven’t seen it, doesn’t mean it’s not there). One thing to keep in mind is that the more extensions you have, the higher possibility exists for Firefox to use up additional memory - and if you are still using v2, the more prone it is to memory leaks. Know what you have and make sure to use it well. Obviously if some tools are similar but not exact you may want them both, but at least be completely aware of it. Regardless…good list!

Link [selenium-ide.seleniumhq.org] for Firefox is good for testing.

I use YSlow, ColorZilla, FireBug.. but my favorite tool is the Web Developper Toolbar !

Web Developer Toolbar is very cool..thanks for this collection

Firebug is just genius.

Love Web Developer, Colorzilla, FireBug, et al., but may I suggest the Codetch extension (http://www.codetch.com/)? It adds a code editor to Firefox under a tab or as a float. Doesn’t replace your IDE but has lots of features and comes in right handy. You can now live your entire working life inside Firefox :-)

Developing websites is no easy task at the best of times. I realized how much you actually learn over the years when my friend was given the task of creating a website. All the small tricks and, dare I say it, hacks that I have picked up and have become accustomed to seem like mountainous tasks to him, being so fresh in web design.

My point being, we need things which make our lives a tad easier, and cut to dev time down as much as possible. This is where Firefox comes in and rocks our world.

Also there is HTTPAnalyzer, could be used as IE plugin or standalone, very helpful.

It’s Firebug first, and everything else takes a distant second.

Really, I can’t remember the way I worked before using Firebug…

Firebug is always in my list. XD

I like the firefox extension Textcomplete. Especially when you need to write something in a browser window, like Expression Engine. You can define any shortcut to anything. As an example, you can predefine “h” as “hello world”, then when you need to write “hello world”, just write “h” and press ctrl+alt+m. that’s all

Awesome list, thanks!! Firebug all the way

The one that have been using a lot lately is Screengrab, a FF extension that allows you to produce full web browser screen shots. May times it is useful to take screen shots of what is below the fold.

The other biggies are Web Developer and Firebug.

Dave

You don’t need most of the rest of tools when you have firebug installed…..

Nothing new in this post…. i read this kind of post to many time in Some many blogs…. :(

Not that I like testing IE, but IETester is pretty awesome:
Link [www.my-debugbar.com]

Allows you to test IE5.5 - IE8 without having to installing them all.

Fantastic article, thumbs up!!!! Like all the others Firebug is my all time favourite, then Web Developer toolbar, Thanks

What? No Link [addons.mozilla.org]? It’s more powerful than Web Inspector, you know

Excellent, excellent, excellent. I have been looking tools for Web Accessibility and i found them here.

try this, nice tool for develop

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 2, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

Link [www.my-debugbar.com]

This is whats backwards about the development community. Its great that there is firebug for Firefox, but is it really needed? The two browsers that you primarly need help debugging in are IE6 & IE7. Currently the way to run both of these browsers on one machine is completely messed up. Microsoft needs to support a better method (Like MultipleIE).

Problem is, this developer toolbar does not work with the MultipleIE programs. Therefore if I actually wanted to do debugging in IE6 I would have to install an entire virtual machine for IE6 to work properly.

Release the IE8 Dev Preview with IE6 in the browser mode as well.

great list - knew about most of them but the screen grab tool is a real find for me. No more print screen and then pulling together in Photoshop!

firebug, fireftp and developer. the latter one I’ll gave a try after reading this article.

Thanks everyone for your input! It looks like Firebug is king, seconded by Web Developer tool.

@Chris and @Marc: I apologize for not linking to the most recent blog post about WebKit, forgive me for my oversight.

@jimbo : I don’t think it’s fair to compare IE Web Developer vs. Firebug because the way I see IE Web Developer is for people testing in IE5+ browsers (which Firebug obviously can’t do). It lacks a lot of features that Firebug has, not to mention a sub-par interface compared to the most recent version of Firebug - but that’s what you gotta use if you’re browser testing in IE.

@Justin: In FF Web Developer Toolbar, you can go to CSS > Edit CSS option to edit (preview) style changes on-the-fly. For HTML, you can go to Miscellaneous > Edit HTML option.

@Anthony Bruno: Firebug isn’t just for testing in Firefox, it’s a tool you can use to improve your workflow. You can use it to debug your JS for bugs that causes your script/s to break (for example)without having to use a standalone application or hunting it down manually using a combination of error reporting through your browser and alert(foo), which save you a lot of time and frustration. You can also use it to quickly inspect the DOM of remote websites, to see how things fit together. You can edit HTML and CSS on-the-fly to preview how it would look… and more. In short, though Firebug is definitely a great tool for testing In FF, that’s not the sole reason for its existence.

Firebug saved our Souls. Thnanks for the good article

Hi, thank you for these. I didn’t know much about these before. I think I will first test Web Developer, it sounds great.