Web Development – Tools Of The Trade

With an ever growing number of browsers to make your code compatible with and higher demands placed on web designers and developers there is a requirement for more powerful tools to create and maintain your code. This tutorial will cover a number of methods and resources to help aid you in the escalating demands of your web projects.

Many Developers and designers have their own personal favorite browser for developing and managing their websites. This tutorial will focus on  the use of Firefox. This is not to say other browsers put you at a disadvantage, but the addons and enhancements are all supported by Firefox.

FireBug

I thought we would start with my favorite web development tool. Firebug is an extremely flexible and powerful web development tool. I could spend all day talking about its features, so I will cut to the most impressive and useful. Designed as an add-on for Firefox, which runs inside the browser application Firebug enables you to inspect elements, search through your code and edit it on the fly. This is a very useful tool if you are working with JavaScript in your pages.

If you want to get really clever you can use  the powerful break point options which enable you to step through your code line by line, This is very useful if you want to decipher what is happening as your code renders on a page, you can add watches to elements to make debugging your code even easier. If you familiar with C++ and JAVA programming you will take to this like a duck to water.

Console Logs

If you have added Firebug to your Firefox browser you can use console.log() commands within your JavaScript which will execute in your firebug console. This is a practical way of bug fixing on live web pages where you cannot just alert out a value. When you’re browser encounters a console log it will display the value in your firebug console, for more information on this and other calls check out the full documentation.

FireCookie

This simple yet powerful add-on for Firefox appears within the firebug console, when downloaded. It  will give you access to information about cookies being stored on your web pages, with the ability to view and remove them as you require, without needing to load up separate tabs, although a similar tool is available on the developer tool bar Firecookie is a convinient option to consider. This is especially useful if you are working on scripts which rely on using cookie data as opposed to session information. It may be simple, but defiantly one I would be lost without.

Web Developer Bar

Most designers and developers are  already very familiar with this toolbar, but its always worth a mention. The web developer bar is a useful bit of kit which can do a number of tasks very well. It has a range of tools which make developing your websites much much easier. For web designers you it gives you free range over your style sheets, meaning that you can edit your style sheet on the fly. This is similar in principle to what is possible in Friebug. The CSS options are great if you want to make a lot of changes to your web pages stylesheets, as once they are made and you can see they are working you need only copy all the contents of the stylesheet over the top of the original and update to your FTP, saving the trial and error method adopted by many.

Yslow

Developed by Yahoo, Yslow is a tool designed to help with website optimisation. Personally I have found you need to take this tool with a pinch of salt. Although It is very useful for measuring page load time, some of the featues such as web page grading are worth overlooking, as the basis of the analysis can conflict with what you may be trying to achieve.

Url Params

Probably one of the most useful tools out there if you ever need to do anything with form submission. Url Params is yet another powerful Firefox add on, it comes in the form of a sidebar which displays both POST and GET information, making it much easier to see what you are sending through. You can also easily add parameters on both in a GET and POST fields. A very effective and easy to use tools.

Summary

The tools I have mentioned will help you if you are a seaoned professional, or just simply a hobbiest. This is not to say there are not more tools out there for you to use. The beauty of this list id that everything on it is free for you to use on commercial project or otherwise. If there are other tools not on the list please comment on them, Im always keen to find out what other developers are using in modern web design.

Related tutorials:

The Web Developer Toolbar for Firefox 9 Useful Tools for Analyzing Web Design PHP includes – For Rapid Web Design Improve Your SEO Part 1 – Google Webmaster Tools