9 Free Productivity Tools That Every Web Developer Should Use

Also available in portuguese

In this article i will share with you some free Productivity Tools that I use as a Web Developer.
 

#1 – Fiddler

Web Debugging Proxy

http://www.telerik.com/fiddler

Fiddler - 10 Free Productivity Tools That Every Web Developer Should Use

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

Let Fiddler opened and do navigate in some websites and you will see a lot of information like size of requests, domains, errors and other things.
 

9 Free Productivity Tools That Every Web Developer Should Use
 

Fiddler - 10 Free Productivity Tools That Every Web Developer Should Use

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

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

Fiddler - 10 Free Productivity Tools That Every Web Developer Should Use

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

Fiddler - 10 Free Productivity Tools That Every Web Developer Should Use

 
With Fiddler you can break a request, manipulate all data in headers and forms before hit the server, so you can do test your application security. Try itself, 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 - 10 Free Productivity Tools That Every Web Developer Should Use
 

Postman is the most beautiful, faster, complete and professional application for API testing purposes I have ever seen. One of the best productivity tools for web developers.

I use that application every time I need to test my restfull API because 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 obvious thing you can do it’s 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.
 

Postman - 10 Free Productivity Tools That Every Web Developer Should Use

 
I prefer use Postman to testing 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 – JSON Editor

Editor and JSON Ident

http://jsoneditoronline.org/

JSON Editor - 10 Free Productivity Tools That Every Web Developer Should Use

 
Sometimes you need to ident or format your JSON data to be more readable and this what JSON Editor is about. You can use it from their own website or just download the Chrome extension from Chrome Web Store.

I suggest you download the Chrome Extension because you can format your JSON files when you offline. With JSON Editor you also can edit your JSON files adding or deleting a node and mucch more.

It uses a user friendly interface to edit JSON data showing different data types in different colors. You easely re-order the nodes, changing type, duplicate and finding a node.

There are two main sides, on the left your JSON data in raw format. Just paste the JSON data to see all JSON formatted and indented on the right side. JSON Editor its well documented.

Finally, JSON Editor is maintained by Ace, a high performance code editor for the web.

 

#4 – JSON Formatter

Format and Beautify JSON data

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

JSON Formatter - 10 Free Productivity Tools That Every Web Developer Should Use

 
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 colorfull.

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

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

 

#5 – Visual Studio Productivity Power Tools

Tools to improve developer productivity

https://marketplace.visualstudio.com

Visual Studio Productivity Tools - 10 Free Productivity Tools That Every Web Developer Should Use

 
Power Tools is a Visual Studio extension pack that brings powerful tools to improve developer productivity. There are too many features that would have an 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.
 

Visual Studio Productivity Tools - 10 Free Productivity Tools That Every Web Developer Should Use

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

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

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

Visual Studio Productivity Tools - 10 Free Productivity Tools That Every Web Developer Should Use

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

One cool feature it’s you can copy a 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 use that extension for some years and didn’t have any problem.

 

#6 – StackEdit

Markdown Editor

https://stackedit.io/

StackEdit - 10 Free Productivity Tools That Every Web Developer Should Use

 
StackEdit is not specific for web developers but all developers or editors that want to style a document with a fill commands. I use that Chrome extension to create my readme.md files for my github repository.

StackEdit uses Markdown that is a lightweight markup language with plain text formatting syntax. You can quickly format a text using simple commands.
 

Chrome Developer Tool - 10 Free Productivity Tools That Every Web Developer Should Use

 
You can use markdown in blog comments, messengers and github readme.md files. The syntaxe is very easy to learn for instance, to make a word in bold just do it **word in bold**. It will reproduce word in bold.

StackEdit takes Markdown a new level because is user friendly interface let’s you to edit a document in markdown in left side e see what html reproduced in the right side.

There a lot of commands to use in markdown and one of them is to reproduce UML diagrams.
 

Chrome Developer Tool - 10 Free Productivity Tools That Every Web Developer Should Use

 
Using StackEdit you can save all Markdown files and edit them using buttons like any other html editor outhere. Just select a word or sentence and format it with bold, italic, adjust the paragraph, insert images and more.

One great feature is possibility to convert html to markdown and import a markdown document from an external URL. StackEdit is maintained by MonetizeJs.

 

#7 – VS Color Output

Colorize output in Visual Studio

http://mike-ward.net/vscoloroutput/

VS Color Output - 10 Free Productivity Tools That Every Web Developer Should Use
 

VS Color Output colorizes the text in Visual Studio output window based in regular expression rules. The default colors are red for errors, yellow for warning and successful in green.

Just download the extension at Chrome Market Place, install it and this is it. One interesting thing in VS Color Output extension is that you can customize any rules you want.
 

VS Color Output - 10 Free Productivity Tools That Every Web Developer Should Use
 

A cool thing about that extension is you can quickly see what is happening because all text is color highighted and you can stop the build or stop debugging before it ends.

The Visual Studio Find Result window is also color highighted and one last important thing, VS Color Output it’s open source and is mainted by Mark Ward.

 

#8 – File Nesting

Nest files based on file name in Visual Studio

https://marketplace.visualstudio.com

File Nesting - 10 Free Productivity Tools That Every Web Developer Should Use
 

File Nesting it’s a great feature and all web developer should use it. It’s automatically nests files based on file name. You can also nest the files manually.

That Visual Studio extension is created by Mads Kristensen, a developer ninja. Mads has more than 80 productivity tools published in Visual Studio Marketeplace, I said more than 80! A cool thing about Mads Kristensen is that all extension has source code available on github.

I started working with that extension in my TypeScript projects. It works with C#, javascript, typescript and css files. You can group all your full and minified version in one place!

 

#9 – Chrome Developer Tool

Web Debugging Tool

https://developer.chrome.com/devtools

Chrome Developer Tool - 10 Free Productivity Tools That Every Web Developer Should Use
 

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 accessing.

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

 
Chrome Developer Tool - 10 Free Productivity Tools That Every Web Developer Should Use
 

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 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 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.

 
Chrome Developer Tool - 10 Free Productivity Tools That Every Web Developer Should Use
 

With Chrome you can Audits your code analyzing all page loads and it’s provide 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 inspecting 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!

 

9 Free Productivity Tools That Every Web Developer Should Use

Productivity Tools for Web Developer: Questions, suggestions and feedbacks will be appreciated. Good luck!

About the Author:
He works as a solution architect and developer, has more than 16 years of experience in software development on several platforms and more than 14 years only for the insurance market.