Five Free Productivity Tools That Every Web Developer Should Use

Fabio Silva Lima

9y39.6k14100Article

14 Comments

Join the conversation! Your thoughts help the community grow.

Sharon Thomson9y ago
Thanks for sharing. For productvity I'd like to suggest ProofHub. With ProofHub, your projects, teams, clients and all the communication stays in one place without the need of investing in too many different tools to run your business.
- Fabio Silva Lima9y ago
  Hello Sharon! Sounds interesting, i will check that, thank yoou.
Chirag Solanki9y ago
Thanks for sharing..!
- Fabio Silva Lima9y ago
  Thank you Chirag Solanki! Power tools is the best what you think?
Humayun Kabir Mamun9y ago
Thanks Fabio for this useful tool's information...
- Fabio Silva Lima9y ago
  Thank you Humayun Kabir Mamun I glad hear that
Guest User9y ago
I didnt know about power productivity tools. Good information. thanx
- Fabio Silva Lima9y ago
  Hello Sumit Jolly! Power Tools it's a very cool extension. You can find 4 more in my website. http://bit.ly/FSL-EN
Vishal Prajapati9y ago
Nice Information..Thanks for sharing..
- Fabio Silva Lima9y ago
  Thank you Vishal Prajapati! I am writing another article about that :)
Naveen Bisht9y ago
really appreciates thanks for sharing such great tips :)
- Fabio Silva Lima9y ago
  Hi Niks Bisht, do you have other productivity tools to share? Thanks!
Mahesh Chand9y ago
Good once Fabio. Thanks for sharing!
- Fabio Silva Lima9y ago
  Thank you Mahesh Chand! Very appreciated and let's write the next article!

This article lists five free Productivity Tools that I use as a Web Developer.

1. Fiddler - Web Debugging Proxy

http://www.telerik.com/fiddler

Fiddler became very popular in web development because it is a simple program that allows us to monitor all HTTP requests and responses for all programs.

Let Fiddler open and navigate through some websites. You will see a lot of information, like size of requests, domains, errors, and other things.

You can either change type of visualization in Raw, Header, Web View or change response formats in JSON and XML.

It's very easy to use and it has important information about requests like cookies, cache and authentication. I think the best feature in Fiddler is that you can see at Statistics tab, you can select one or more requests to check the size and elapsed time, and compare with worldwide servers.

You can also manually perform GET or POST requests inside that Web Proxy. Another feature I love is to visualize all the data information submitted to a Web Server in we forms view showing each form field. For that, just select the POST request and click in WebForms tab.

With Fiddler, you can break a request, manipulate all data in headers and forms before hitting the server, so you can test your application security. Try it and change data, form name fields and check what happens with your application.

Today Fiddler is maintained by Telerik and joined at Progress Company wich is a big company with solutions for enterprise integration, data interoperability and application development.

2. Postman

Test, Document & Monitor APIs

https://www.getpostman.com

Postman is the most beautiful, fast, complete and professional application for API testing purposes I have ever seen. It's one of the best productivity tools for web developers.

I use this application every time I need to test my restful API because of the simplicity, usability and features. I can download it using Postman website or Chrome Extension Webstore for Windows, MAC, Linux and off course Chrome browser.

The first and most obvious thing you can do is send a GET request for an API. Just fill the address field and click Send button to show all result data and information about the request.

I prefer to use Postman to test my API instead of Fiddler because it saves all my requests and shows them in history tab localized at left of window. You can also configure an enviroment for each API.

3. Visual Studio Productivity Power Tools

Tools to improve developer productivity

https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.ProductivityPowerTools2015

Power Tools is a Visual Studio extension pack that brings powerful tools to improve developer productivity. There are too many features that would need a specific article for it.

Download that extension at Visual Studio Marketplace and just install in your Visual Studio to see what I am talking about.

Power Tools takes the errors warnings to a new levels by showing us what file has a problem in their projects and dependencies.

It's awesome! All code blocks come with markers close to scrollbars so you can check what blocks of code are changed, what are the new ones, where the errors are and much more.

All opened documents are marked with a red bullet indicating a problem so you can quickly fix the error.

One more interesting thing to say about Power Tools is the indentation in code editor. It's put color of all identations so you can easily see where a block of code starts and ends.

One cool feature is you can copy html from code editor and paste it outside visual studio and it comes with all colors and formats! Very useful feature!

Productivity Power Tools is mainted by Microsoft itself and has more than 300.000 installs. I have used that extension for some years and haven't had any problems.

4. JSON Formatter

Format and Beautify JSON data

https://github.com/callumlocke/json-formatter

If you want something more simple to format and indent JSON data on the fly you can download that excellent Chrome extension at Chrome Web Store.

Format and indent your API in Chrome browser with JSON Formatter. Type any API and you see the JSON result formatted, indented

and colorful.

Another feature is interesting, all links are transformed in hyperlinks, numbers are colored in blue and you can toggle in/out of all nodes.

JSON Formatter extension is maintained by the Financial Times developer Callum Locke.

5. Chrome Developer Tool

Web Debugging Tool

https://developer.chrome.com/devtools

Finally the champion of all productivity tools: The Chrome Developer Tool. It comes with Chrome web browser and you can access it pressing F12 key. It will open another window with all information about the website you are accessing.

With the Console you can debug all javascript source code, put breakpoint, watches variables, see the errors and much more. You have all kinds of debugging features that you have in Visual Studio, like enter a method, immediate window, go back and forward in the debug.

Like the image above with Chrome Developer Tool you can inspect the DOM and Styles. To do it just point your mouse to an object in the screen and press mouse's right button, and in context menu choose "Inspect". It will open the developer tool and you can add or change anything in the html.

One interesting thing is you can monitor all network resources in real time to improve performance your application identifying those requests to see what is taking longer and optimize it.

With Chrome you can Audits your code analyzing all page loads and it provides suggestions for optimizations to increase responsiveness. A feature that is close to Audits is the Timeline panel that gives us a complete overview where time is spent when pages loads.

You can also inspect the local storage, cookies and cache. Try it yourself, open Chrome web browser, enter in some website and press F12 to see Chrome Developer Tool in action.

I hope it helped, good luck!

You can also read my article "9 Free Productivity Tools That Every Web Developer Should Use".