In this article i will share with you some free Productivity Tools that I use as a Web Developer.
#1 – Fiddler
Web Debugging Proxy
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.
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.
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.
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.
#2 – Postman
Test, Document & Monitor APIs
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.
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
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
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.
#5 – Visual Studio Productivity Power Tools
Tools to improve developer productivity
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.
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.
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
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.
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.
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
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.
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.
#8 – File Nesting
Nest files based on file name in Visual Studio
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.
#9 – Chrome Developer Tool
Web Debugging Tool
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.
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.
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!