List of Tools you should be aware if you are a Web Developer

1.      Internet Explorer Developer Toolbar

The Internet Explorer Developer Toolbar is released as a free plug-in for Internet Explorer 6.0 and above. With this toolbar it is now possible for a developer to understand and correct the rendered HTML as good as a UI designer. It has a handful of useful features which makes it possible for even those not trained in HTML techniques to use it to its fullest.

Download the plug-in here.

Read my article - Internet Explorer Developer Toolbar

2.      FireFox with FireBug plug-in & Web developer plug-in

Install FireFox browser if you don’t have.

Download it from here.

Firebug

Firebug plug-in to FireFox is also similar to IE developer toolbar but with more features. Apart from editing the rendered HTML, we can also analyze the number of files downloaded for a request and its time taken. It is possible to debug JavaScript, etc.

How to install FireBug plug-in?

1.      Visit the FireBug home here from FireFox.

2.      Click “Install FireBug” button.

3.      Now, Click “Add to Firefox”.          

After Restarting Firefox, you will get a bug icon on the right hand side of the status bar which will enable the toolbar when clicked. Refer below figure. As I said earlier, it will have number of menu items to manipulate the HTML output similar to IE toolbar with an additional option (Net) to see number of files downloaded for a request. Below figure, shows the request details for codedigest.com homepage.

Web developer

This toolbar is a must have add-in if you have firefox. It includes the entire feature set what IE developer toolbar offers and more, like,

Ø       Disable CSS

Ø       Disable Images

Ø       Disable JavaScript

Ø       Clear private data

Ø       Outlining page elements

Ø       Edit HTML

Ø       Browser Resizing

Ø       Validating the page

How to install WebDeveloper toolbar to Firefox?

1.      Visit the toolbar download page here.

2.      Now, Click “Add to Firefox”.

            After restarting you will get a new toolbar appearing on the firefox. Refer the figure below.

            All options are quite self explanatory and easy to use.

    3. Fiddler

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet/server. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

Get Fiddler here.  Please refer the documentation on the Fiddler’s site here to understand how to work with it.

    4. File comparison tool

A file comparison tool is a must have tool for a developer. This helps a lot when we do enhancements on an existing websites. You can use Windiff that comes with Visual Studio.

You can also try using Beyond Compare for this. The only difficulty in using Beyond Compare is it is not free. Download a trial version here.

    5. HTML editor like Dream weaver, Use Visual studio

A HTML editor like dreamweaver is must. If you are ASP.Net developer you can use your visual studio for this.

    6. Reflector.exe – Lutz Roeder’s .Net Reflector

If you are a .net developer, it is a must to have tool. Using this tool, we can generate the code from the assembly, a reverse engineering tool. We can understand class hierarchy, methods, etc.

Download it here.

    7. WAMP server

If you want to try php or any php open source CMS like Joomla, wordpress, etc then install WAMP server for windows to play with these in your windows machine. The WAMP server package includes php, mysql and Apache webserver. So, you can prevent the difficulty of installing and configuring php, mysql and apache in windows with this package.

Download it here.

List of tools you should be aware if you have a public website

This section will discuss on some the useful tools and websites that will assist you when you are owner or webmaster for a public website.

Google Webmaster tool

Google Webmaster Tools provides you with detailed reports about your pages visibility on Google. It also helps us to identify errors on the pages and websites level, statistics on keywords and links that drives traffic to our website, etc.

Visit Google Webmaster tool homepage here.

Google Analytics

This is one another freebie from Google for webmasters.

Learn more about where your visitors come from and how they interact with your site. You'll get the information you need to write better ads, strengthen your marketing initiatives, and create higher-converting websites.

It provides you variety of detailed information about your site visitors. Some features include,

1.      No of Visits.

2.      No of Visits based on countries.

3.      Average time spent by visitors.

4.      Statistics on new visits.

5.      Bounce rate.

6.      Statistics on Top contents.

Apart from above features it includes custom reporting, setting goals, email reporting, etc.

Visit Google Analytics home page here.

Google Toolbar

This is not a must have toolbar but at times it will be useful. We can check our page rank easily with this toolbar. Refer the below figure.

To enable the above option, right click the toolbar > Google Toolbar Options > Click Tools tab and check PageRank option. Click Save.

Alexa

This site also provides some information about traffic and page rank. You can see codedigest.com page rank here.