Click here to Skip to main content
14,666,385 members
Articles » Web Development » Applications & Tools » Debugging
Technical Blog
Posted 26 Apr 2016

Tagged as


38 bookmarked

Tools that Will Make a Web Developer's Life Easier

Rate this:
4.98 (23 votes)
Please Sign up or sign in to vote.
4.98 (23 votes)
30 Apr 2016CPOL
Here are some tools which will make a web developer's life easier


Today, the world has grown so much and has been so friendly for developers, thousands of tools have been floating in the market for free, but we need to realize and have them in our bucket whenever required.
I will be discussing few important tools, which are handy and work out for every developer.



The best tool for the developer which can be installed on FireFox (add-on). This helps monitor the structure of your HTML, CSS and also JavaScript. To add the Firebug and get it going, add now!

Image 2

A web development tool which will help any developer track the issue with the client side and also track the response time for the requests in the network tab.

The tool tab looks like below:

Image 3


This is a very important tool, which is a restful API client, which helps developers not to waste time debugging and check the result set and how the API behaves every time they run Visual Studio. Now, we just need to call the URL of the API from Postman and it gives us the result, even the status code.

Image 4

This will allow developers to request any API, may it be GET, PUT, POST or DELETE.

Image 5

Image 6
I made a get request to an exposed github API to show how the POSTMAN reacts and shows us the Json result, also the response time and the Status (200 Ok, 404 Not found, 403 Forbidden).

Yslow 8

This is such a powerful tool for any developer developing any web application, which without any fondness to anyone, ruthlessly shows how good your web app is and how good it will behave? The below image says it all:

Image 8

The above web site has been given a Grade ‘D’ by Yslow. This also gives a description of why the grade is low, what can be modified or implemented to improve your grade. Here, it also lets developers know for bundling and minification for the JavaScript and the style sheets. So use it and improve the performance of your web app.


Css Sprite Generator

Sprites is a collection of images put together into a single image. So instead of adding multiple images and heavy-ing the web page, we can prefer sprites with images and using CSS to generate and display on web page.
CSS sprite generator add on tool helps you create Sprites. Sprite Cow also helps you generate sprites and also the CSS to use on your web page.

Image 10

Web Developer

This is a very interesting add on for every developer. This has a lot of features added to it and each of them is useful while developing.

Image 11

Add the web developer add on and play around. There are a lot of features out there for you.

Image 12

There are features for CSS, forms, JavaScript, images, cookies, etc.

Window Resizer

Image 13
Another helpful tool for every developer, as now a days every web app is being designed to be responsive. Developers add CSS and HTML to make it responsive, but it is not possible for developers to test on every possible devices which end users would be using. This helps you resize your web app window and test if the pages are responsive as expected.

Image 14

Add and play with it.

CSS Viewer

This is an interesting tool to be used, as it lets you view the CSS being used on the web page. This helps check the CSS hovering over the web page area.

Image 15

CSS Viewer Add on

The add after added on web page looks like below:Image 16

Cache Clear 17

Image 18
How many times do we developers face the wrath from the testing team, that this is not working, this is breaking and what not! And we ask them to do just one thing, “Please clear your cache”! and then everything works! Here is an add on which helps you clear cache for the application on click of a tool tip only.

Add and recommend testing to add as well. 😛

Angular Batrang 21

Image 21

Angular being the king now, every developer is starting to learn and use Angular. This is a very nice tool to be used on Angular application, if they wish to track the scopes and Angular objects and how they behave.

After adding the extension, in the developer tool, it comes as an add on and you can navigate and play with it on your Angular web app.

Image 22


These were few important developer tools, which I use in my day to day development and I hope this will help few developers as well as they are very useful once you start using and exploring them. Play around and you will be addicted to them. I hope readers will share their views and share which other important developer tools they recommend.

Come on! Recommend and share your views!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
India India
No Biography provided

Comments and Discussions

Bugimages not showing Pin
Serge Desmedt2-May-16 20:24
professionalSerge Desmedt2-May-16 20:24 
BugLinks are not working Pin
aparrygordontafe2-May-16 14:25
Memberaparrygordontafe2-May-16 14:25 
Suggestionlinks not working Pin
Stacy Murray30-Apr-16 9:23
MemberStacy Murray30-Apr-16 9:23 
PraiseSuperb article Pin
FeroseKhan29-Apr-16 19:14
MemberFeroseKhan29-Apr-16 19:14 
GeneralRe: Superb article Pin
Passion4Code29-Apr-16 21:08
professionalPassion4Code29-Apr-16 21:08 
PraiseOne more Pin
Member 1235607129-Apr-16 9:53
MemberMember 1235607129-Apr-16 9:53 
GeneralRe: One more Pin
Passion4Code29-Apr-16 21:09
professionalPassion4Code29-Apr-16 21:09 
QuestionGrammar - That vs Which Pin
hweisberg29-Apr-16 9:23
Memberhweisberg29-Apr-16 9:23 
AnswerRe: Grammar - That vs Which Pin
Passion4Code29-Apr-16 21:04
professionalPassion4Code29-Apr-16 21:04 
QuestionGood insights Pin
Member 1075951629-Apr-16 8:34
MemberMember 1075951629-Apr-16 8:34 
AnswerRe: Good insights Pin
Passion4Code29-Apr-16 21:08
professionalPassion4Code29-Apr-16 21:08 
QuestionI didn't know some tools NICE! Pin
George Tourtsinakis28-Apr-16 23:34
MemberGeorge Tourtsinakis28-Apr-16 23:34 
AnswerRe: I didn't know some tools NICE! Pin
Passion4Code29-Apr-16 1:06
professionalPassion4Code29-Apr-16 1:06 
QuestionJust for sake of clarity, change the title to 'Web Developer' Pin
Hamid Noorbakhsh28-Apr-16 6:24
professionalHamid Noorbakhsh28-Apr-16 6:24 
AnswerRe: Just for sake of clarity, change the title to 'Web Developer' Pin
Passion4Code28-Apr-16 6:58
professionalPassion4Code28-Apr-16 6:58 
QuestionGreat ! Pin
Unicaln26-Apr-16 13:13
MemberUnicaln26-Apr-16 13:13 
AnswerRe: Great ! Pin
Passion4Code26-Apr-16 20:00
professionalPassion4Code26-Apr-16 20:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.