I’ve been a developer for nearly ten years. I’ve used a ton of developer tools for code authoring, editing, statistics and debugging. I’ve come to realize that some of the best programs for web developers are not that expensive, in fact – they’re FREE! I wanted to make a quick post and list some of these tools. Hopefully it will help out some of you developers out there.
Best Free Code Editor: HTML Kit
Based on what I’ve used, this is CLEARLY the best free code editor available. Features include a built in FTP client so you can work directly on your server, color-coded syntax, code tidy, and a huge amount of available pluggins for any language you could possibly want to write. Download it and give it a try, it’s very small and not a big resource hog. NOTE: Be sure and adjust the settings when you install it so you can “undo after save.” Simply open Edit -> Preferences, then select the “save” tab and check “allow undo after save.” You will be glad you did.
Best Free Web Browser: Firefox
First off, if you are a web developer and not using the browser “FireFox”, shame on you. FireFox is very developer friendly, fast, expandable, and the most secure and compliant free browser available (IMO). Before you can enjoy the web developer mentioned below:
Now, assuming you have Firefox installed, check out these free tools that are aimed at the web developer.
Best Free Website De-Bugging Tools: Firebug & Web Developer Toolbar
Firefox has an impressive library of free “add-ons” that expand the features and capabilities of the browser. Many of these are aimed directly at the developer. Two stand out to me as being indispensable. It took me a while to get into using these tools, but now I simply can’t work without them. I use these ALL day at work.
Firebug is incredible. This tool runs either within your browser or can be launched as a separate window. With firebug you get a very powerful list of features designed to help with CSS layout, JavaScript debugging, and so many more very helpful tools. I’ve used this program a ton and I find the best part is the “Inspect” tool.
Install this add-on, open a website in Firefox and click F12 to launch the Firebug console. You will see a button for “Inspect” on the top left of the Firebug interface. With this tool activated, move your pointer around the page. You can see how the tool will highlight any element you hover over, and it will give you all the CSS values for that element – taking into consideration inheritance. Try it, you will never go back.
Another great feature is when you hover over any of your markup in the Firebug console, it will highlight the element on the page. But… the cool part is that you will see the margin and padding highlighted as well. This is VERY cool when it comes to making a page look the same in both Firefox and IE. Usually discrepancies in display are a padding or margin issues. With Firebug you can easily see what the padding and margin are doing to other page elements and adjust accordingly.
Enough of my banter, just get it! I couldn’t possibly tell you all the features in this one post, try if for yourself. Besides, it’s free and does not use many resources.
Web Developer Toolbar is also incredibly bad-ass. In fact, if I had to pick one, this would be the tool I can’t go without. Firebug (above) is great, but this tool bar just has so many options – dealing with so many aspects of web development. Download and install this tool, again it’s free and uses very few resources.
Once you have this installed you will see the toolbar appear in your browsers header. I know what your thinking – browser toolbar, no thanks. Trust me, this is not a yahoo, install against your will “spam bar”. This is a very powerful, and VERY helpful catalog of tools. Look around at the options. You can:
- Auto-complete forms. This alone will save huge amounts of time when testing big forms.
- Outline block level elements. Either all the page elements, or the ones you hover over, or table cells.. or, well you name it. I use this tool the most when doing a CSS-based layout to see what each element is doing.
- Miscellaneous layout tools.You can show a page magnifier, line guides, ruler, etc…
- Display all cookie information. You can also block cookies for testing.
- Disable javaScript and CSS. Test how your site works for text-only browsers, screen readers, and other accessibility-focused browsers.
- Display Markup and CSS validation. I am huge believer that valid code gets your site better results. This tool will help you build better and valid websites.
- Display document outline. Now you can clearly see your page content in a new light, by showing you how your header tags relate. Once you figure out how to take advantage of these, your SEO will definitely improve.
What can I say, I love this tool. If you are a developer and not using Firefox with the Web Developer Toolbar – honestly, grow up! 
Best Free FTP Client: FileZilla
Like most, I’ve used a bunch of different FTP clients. FileZilla has risen to the top. I like the interface, drag-and drop, and permissions options. FileZilla can also be set up to transfer more than one file at a time. I have mine set to four; it really helps speed up download times. There are standard features like transfer types and overwrite settings. In fact, the “settings” panel is very in depth with what the program can do. I also really like the interface. It’s very Cute-FTP’ish without the cost. My only complaint is that there is no transfer filter yet. I hear it’s on the way with next version. Then, I reckon it will be perfect. Like I said with the previous tools, just get it and test it for yourself.
Summary – it’s ok to be cheap.
With the tools above, and a little reading, you can be developing websites with little to no out of pocket costs. I’d say download them all, give them a whirl and let me know what you think. Free = Badass.