Resources

7 Important tools web developers can use for faster development and UI Designing

By May 9, 2012 February 5th, 2018 No Comments

Here is my list of tools that I keep handy while working on UI and quick content updates. I avoid being too much dependent on Designers for small tasks such as cropping & resizing images, it could be annoying for them as well.

Web Developer Addon: One of the most popular Firefox Addon of developers, its very useful when you working on UI or working on website optimization. Specially when you know pages are talking longer time that expected while loading you can easily identify HTML elements using this addon. You can also edit Form Variables on client side and tweak with form submissions (Sounds like a hack but if you look at from tester point of view, this make their job quite easy)
Donwload Web Developer Addon

Firebug: Firebug is most used Firefox Addon that can be used for quickly changing and checking DOM structure, CSS styles, Javascript debugging. It also has options for HTTP request & response analysis. I find it useful while checking AJAX Request and Response. The most impartation feature of Firebug is that it allows inline editing of HTML. So you can quickly check HTML changes in real time rather than going to code… modify… save… and then checking in browser. It save a lot of time. So change inline and once you are sure change the actual code.
Download Firebug

IE Dev toolbar: Nice that Firebug can be used with Firefox but what about IE? Well IE Dev toolbar is there to solve that. it has 60% features of Firebug additional it has a button for quickly clear your browsers cache, that saves lots of time and repetitions when you are working on HTML, JS or CSS files. However it can not be used for monitoring HTTP traffic. But we have Fiddler for it. After you install IE Dev Toolbar press F12 on IE Browser to lauch the toolbar.

Download IE Dev Toolbar

Fiddler: For monitoring HTTP request and response, it can be very easy for testing as well as you can edit FORM data and check responses quickly rather than testing things on a web page. It also helps you quickly check 404, 301 and 302 errors
Download fiddler

Instant Eye Dropper: Most of the times you require exact color from a website or image and usually we requre HTML color code only. Instant Eye Dropper is a quicky utility which you can drag from your System Tray or Notincation Icons on the color of your choice and this tool shows you HTML color code for the same.
Download Instant Eye Dropper

FastStone: My mostly favioute image editing tool which makes watermarking, applying border, cropping and resizing images very easily. It also has very nice image editng options to blur, change color densities and many preset effects that you can apply for images to use on your websites. This can also process images in batches.
Download FastStone

Greenshot: Greenshot allows you to take snapshot of selected screen area and save it. This saves time in cutting images, it also comes with few basic image editing options. Images that you see on these pages are snapped using Greenshot only.
Download Greenshot

Xenu: Xenu can be used for checking all link references for your website. I use xenu after completing a website to that check all links are working propery. Xenu also checks for emails with “mailto”. It is also helpful for cheking Meta tags and title in a single glance.
Download Xenu

This was my list of tools that I use everyday, if you know any additional tools kindly post them in comments section below. I will keep this page updated as I get to know about more such useful tools.

Leave a Reply

DEMO01