1. Firebug
Detailed info of what is Firebug can already be found at http://getfirebug.com/whatisfirebug but some of the features i enjoy the most are:
Javascript debugging: Javascript debugging has never been so easy as its with firebug you can add breakpoints. Do line-by-line debugging of code.
Javascript Logging: Firebug provides a console object. So whenever we write in our javascript code.
console.log(“the value of var is:” + i);
it will log it to the console tab in firefox.
Firefox Extendibility: Yes you got it right. Firefox can be extended to add further functionality in it Jan Odvarko talks about this in his blog http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/
2. YSlow
The major challenge in your web project is your site’s performance. YSlow is a tool from yahoo that analyses web pages and gives you suggestions on the basis of http://developer.yahoo.com/performance/rules.html which is a set of rules highly effective for improving your sites performance. Remember that YSlow is a firebug addon so you need to first have firebug added into your Firefox browser to add YSlow. Another Tool of the same category is page speed from google.
3. Debugbar
Debugbar is an IE plugin. It has features like DOM Inspector, HTTP Inspector, Javascript Inspector, and Javascript Console, and much more read it at http://www.debugbar.com/. The feature of debug bar I enjoy the most is its javascript console.
4. www.jsfiddle.net
JSFiddle contrary to others is an online tool that they prefer calling an online tool for the web. The most wonderful thing about JSFiddle is that it allows you to include various javascript libraries in the code you are writing and test your code alongside. The other beautiful thing is you can save your fiddles and share them with others.
5. Browsers
Mozilla Firefox, Internet Explorer, Netscape Navigator, and Google Chrome are the browsers that i have installed on my machine and I like playing with the various DOM Models and CSS releases they support. One piece of code which works on Mozilla wouldn’t necessarily work on IE and I keep referring to http://www.quirksmode.org/compatibility.html for browser compatibility.
6. GIMP 2
GIMP is the best freeware image editing tool that I have few of the things I use gimp for is Scaling, Cropping, rotating, rotating, adding text to an image, joining two or more images, etc. It’s a wonderful tool with lots of basic capacities like layering, conversion from one format to another, adding alpha channels etc.
7. Editplus
Editplus is a wonderful text editor which can be used for purposes like editing of html,php, java files as well it has powerful search and replace functionality and allows you to make search based on your regular expressions.
8. Eclipse Europa
Eclipse is my favorite IDE for years. What I like most about it is if I want to write java or php I need not switch between IDE’s. Its connection with CVS and numerous plugins make me a fan of it.
9. Http Analyzer
HTTP Analyzer is an IE Plugin. It helps me analyse web traffic. Read cookie and header information, request-response post data, etc.
10. Beyond Compare
In a distributed team when people are working on a single file. To modify it for different functionalities what you need to have is a tool handy where you can merge your code with fellow developers’ code. There are several tools available for that but the one that I use is beyond compare for its functionalities like comparing files and folders. Showing line-by-line differences.
11. CVSNT
This is again a tool very useful in a distributed team although not a perfect fit to be categorized as a web development tool. But I wanted to mention it as most of the web development occurs in distributed teams only. My love for it increases for the fact that its client can be easily configured with my Eclipse IDE and I need not switch from my IDE to synchronize my files to the CVS Server or get an update or merge my changes. Other similar products are SCCS Subversion etc.
12. CSSTidy
CSS Tidy is a parser and an optimizer. It helps you optimize your css page to gain faster loading times for your Styled Web Pages and it helps you in also formatting your CSS source code.
13. YUI Compressor
YUI compressor is used to compress the javascript files and is used to retrieve a minified version of the file the compressed JS files help achieve performance benefits as the size of the data transferred from the webserver is much less than before. It’s a java based tool developed by Yahoo.
Detailed info of what is Firebug can already be found at http://getfirebug.com/whatisfirebug but some of the features i enjoy the most are:
Javascript debugging: Javascript debugging has never been so easy as its with firebug you can add breakpoints. Do line-by-line debugging of code.
Javascript Logging: Firebug provides a console object. So whenever we write in our javascript code.
console.log(“the value of var is:” + i);
it will log it to the console tab in firefox.
Firefox Extendibility: Yes you got it right. Firefox can be extended to add further functionality in it Jan Odvarko talks about this in his blog http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/
2. YSlow
The major challenge in your web project is your site’s performance. YSlow is a tool from yahoo that analyses web pages and gives you suggestions on the basis of http://developer.yahoo.com/performance/rules.html which is a set of rules highly effective for improving your sites performance. Remember that YSlow is a firebug addon so you need to first have firebug added into your Firefox browser to add YSlow. Another Tool of the same category is page speed from google.
3. Debugbar
Debugbar is an IE plugin. It has features like DOM Inspector, HTTP Inspector, Javascript Inspector, and Javascript Console, and much more read it at http://www.debugbar.com/. The feature of debug bar I enjoy the most is its javascript console.
4. www.jsfiddle.net
JSFiddle contrary to others is an online tool that they prefer calling an online tool for the web. The most wonderful thing about JSFiddle is that it allows you to include various javascript libraries in the code you are writing and test your code alongside. The other beautiful thing is you can save your fiddles and share them with others.
5. Browsers
Mozilla Firefox, Internet Explorer, Netscape Navigator, and Google Chrome are the browsers that i have installed on my machine and I like playing with the various DOM Models and CSS releases they support. One piece of code which works on Mozilla wouldn’t necessarily work on IE and I keep referring to http://www.quirksmode.org/compatibility.html for browser compatibility.
6. GIMP 2
GIMP is the best freeware image editing tool that I have few of the things I use gimp for is Scaling, Cropping, rotating, rotating, adding text to an image, joining two or more images, etc. It’s a wonderful tool with lots of basic capacities like layering, conversion from one format to another, adding alpha channels etc.
7. Editplus
Editplus is a wonderful text editor which can be used for purposes like editing of html,php, java files as well it has powerful search and replace functionality and allows you to make search based on your regular expressions.
8. Eclipse Europa
Eclipse is my favorite IDE for years. What I like most about it is if I want to write java or php I need not switch between IDE’s. Its connection with CVS and numerous plugins make me a fan of it.
9. Http Analyzer
HTTP Analyzer is an IE Plugin. It helps me analyse web traffic. Read cookie and header information, request-response post data, etc.
10. Beyond Compare
In a distributed team when people are working on a single file. To modify it for different functionalities what you need to have is a tool handy where you can merge your code with fellow developers’ code. There are several tools available for that but the one that I use is beyond compare for its functionalities like comparing files and folders. Showing line-by-line differences.
11. CVSNT
This is again a tool very useful in a distributed team although not a perfect fit to be categorized as a web development tool. But I wanted to mention it as most of the web development occurs in distributed teams only. My love for it increases for the fact that its client can be easily configured with my Eclipse IDE and I need not switch from my IDE to synchronize my files to the CVS Server or get an update or merge my changes. Other similar products are SCCS Subversion etc.
12. CSSTidy
CSS Tidy is a parser and an optimizer. It helps you optimize your css page to gain faster loading times for your Styled Web Pages and it helps you in also formatting your CSS source code.
13. YUI Compressor
YUI compressor is used to compress the javascript files and is used to retrieve a minified version of the file the compressed JS files help achieve performance benefits as the size of the data transferred from the webserver is much less than before. It’s a java based tool developed by Yahoo.
My 13 Web Development Tools
Thanks Sushil for sharing you tools list. I would like to hear your thoughts on how to induct a fresher into UI/Web development area. What are the concepts/tools they should focus on first and other advices to continue their journey in this growing field? May be a blog post on the same topic will help.
This comment has been removed by the author.
Great tools Sushil, I consistently use Firebug it is a great tool. You should also check out https://addons.mozilla.org/en-us/firefox/addon/tamper-data/ and http://www.fiddler2.com/fiddler2/ and for a good free SVG to PNG or PDF it is executable but also accepts CMD LINE parameters http://inkscape.org/