DEV Community

Cover image for Useful Tools for Developers
Lucas Bittencourt
Lucas Bittencourt

Posted on • Updated on • Originally published at d3vl3jxeh4ou3u.cloudfront.net

Useful Tools for Developers

Useful Developer Tools

More complete post: https://github.com/lucasgdb/useful-dev-tools and help contribute and grow!

Some below tools helped me a lot when i needed it. Feel free to add more tools, if you know more tools and if you want to help the developer's community. Please, submit a Pull Request or Open an issue for a useful tool that you know.

Web Tools 🌐

Web Tool Description
KeyCode Info Easy visualizer for JavaScript KeyCodes.
Carbon Create and share beautiful images of your source code.
DevHints Rico's cheat sheets.
Netlify Build, deploy, and manage modern web projects.
GitHub GitHub is a development platform inspired by the way you work.
GitHub Pages Websites for you and your projects (Static projects.)
Gist Instantly share code, notes, and snippets.
Gitter Gitter is a chat and networking platform that helps to manage, grow and connect communities through messaging, content and discovery.
DevHub TweetDeck for GitHub. See repo activities and manage your notifications by creating columns with filters, saving items for later and more.
Trello Trello’s boards, lists, and cards enable you to organize and prioritize your projects in a fun, flexible, and rewarding way.
Taiga Taiga is a project management platform for agile developers & designers and project managers who want a beautiful tool that makes work truly enjoyable.
Notion The all-in-one workspace for your notes, tasks, wikis, and databases.
Choose an License An open source license protects contributors and users. Businesses and savvy developers won’t touch a project without this protection.
JS Paint it's a web-based remake of MS Paint.
svgomg Web GUI for SVGO.
HTML Minifier Minify HTML and any CSS or JS included in your markup.
CSS Compressor Use CSS Compressor to compress CSS (CSS 1, CSS 2, CSS 2.1 & CSS 3) to reduce CSS code size and make your website load faster.
JS Compressor It's an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size.
Web Resizer Make photos faster. (Step 1)
JPEG and PNG Compactor Make photos faster. (Step 2)
TinyPNG Smart PNG and JPEG compression.
MarkDown Editor Live (GitHub-flavored) Markdown Editor.
DevDocs API documentation and works offline.
MDN Docs Resources for developers, by developers.
DigitalOcean It make it simple to launch in the cloud and scale up as you grow—whether you’re running one virtual machine or ten thousand.
Regex101 Validator for regex.
Regexr Regex parser
Freeformatter Regex validator for Java
Gitignore.io Web service designed to help you create .gitignore files for your Git repositories.
Git Explorer Find the right git commands without digging through the web.
JSONLint Validator and reformatter for JSON.
Conventional Commits A lightweight convention on top of commit messages.
DB Fiddle An online SQL database playground for testing, debugging and sharing SQL snippets. Supports MySQL, PostgreSQL and SQLite.
Can I use "Can I use" provides an up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Convertio "Convertio" is an easy free file format converter that can help you create PNG, JPEG and PDF files.
Deployer A deployment tool for PHP.
Paper Js An open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
CodeKit Using this tool, web app development work can be done faster as it minifies, combines and syntax-checks JavaScript.
CyberChef The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis.
Wappalyzer Identify technology used on websites.
ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator.
Get Waves Create SVG waves for your next design.
DBDiagram A free, simple tool to draw ER diagrams by just writing code.
DeployBot Instantly build and ship code anywhere in one consistent process for your entire team.
Gerador de CPF e CNPJ Perfect for testing.
cssreference cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
W3Schools The world's largest website for web tutorials.
HTML Cleaner Free HTML, CSS, and JavaScript beautifier.
Requestbin Inspect HTTP events, webhooks, etc.
Postwoman Api request builder.
P5.js A JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
Heroku Build, run and deploy applications entirely in the cloud.
Firebase A Google SaaS backend solutions for cross-plataform applications
Figma Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with big differences that make Figma better for team collaboration.
AWS Amazon Web Services, an on-demand cloud computing platform.
Repl.it Powerful and simple online compiler, IDE, interpreter, and REPL
Git Branching This app was developed to help beginners learning powerful concepts behind git branching. We hope you like this app and maybe even learn something! - Learn git by doing!
Stack Overflow Stack Overflow is an open community for anyone that codes. It help you get answers to your toughest coding questions, share knowledge with your coworkers in private, and find your next dream job.
Animista CSS ANIMATIONS ON DEMAND
Hacktoberfest Checker A website to know the PR count of hacktoberfest participants.
Photopea A online image editor. Very Similar to photoshop.
Powtoon A video maker for presentations.
Swagger an online swagger editor for creating interactive Rest API documentations.
AWS Cloud9 AWS Cloud9 is a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser.
Big Text Convert text to big text as easy as you think.
Frisby.js The Easiest REST API Testing Framework Out There.
JSON Editor Online JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in a code editor.
CodePen Online community for testing and sharing HTML, CSS and JavaScript code snippets.

Desktop Tools 🖥

Desktop Tool Description
VSCode A rich text-editor by Microsoft to improve your workflow. (I love it <3)
VSCodium Open Source Binaries of VSCode.
Sublime Text A sophisticated text editor for code, markup and prose.
ATOM A hackable text editor for the 21st Century.
Insomnia Debug APIs like a human, not a robot.
Postman Postman Simplifies API Development.
Zeit, Now The Global Serverless Platform. (CLI)
Agent Ransack Agent Ransack is a file search tool for finding files on your PC or network drives.
Fiddler The web debugging proxy for any browser, system or platform.
Homebrew The missing package manager for macOS (or Linux).
pgAdmin A full-featured PostgreSQL install for MacOS.
iTerm2 A terminal emulator for macOS to replace Terminal.
Robo 3T A GUI for editing and viewing MongoDB Data.
GitHub Desktop A GUI for GitHub.
CodeLobster It is a free as well as a convenient PHP IDE that is used to develop fully featured web applications.
Datagrip Database IDE with mostly databases compatibility.
vim Highly configurable text editor
Chocolatey Software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages
Sourcetree A Simple GIT UI for windows and mac
Notepad++ Text viewer in most languages, easier when you need to open faster code to check something.
Compare It! Compare texts, indicating the differences. Practical, light and fast.
DBeaver Free multi-platform database tool for developers, SQL programmers, database administrators and analysts. Supports all popular databases: MySQL, PostgreSQL, SQLite, Oracle, DB2, SQL Server...
Git Kraken Legendary Git Client for windows, mac and linux. Really practical and robust.
Brackets An open Source and Modern text editor for web design.
Termius A modern cross-plataform SSH/SFTP Client.
Docker Easily run local linux-based containers.
Indri Tool for creating index and querying the index for any size dataset.
OWASP ZAP Useful open-source proxy tool for developing with security in mind.
Toggl A smart and usefull time tracker for teams containing helpful integrations like with Github for all plans.
Protege Open source ontology editor and knowledge management system.
PyCharm Integrated development environment (IDE) specifically for the Python language developed by JetBrains.
VirtualBox An open source virtualization product developed by Oracle.
RealVNC Tool to securely access remote desktop.
HTTPie A command line HTTP client, similar to cURL, but with a nicer output and syntax.
Arduino Text-editor tools for make any robot or IoT.
TablePlus Database management made easy. Modern, native, and friendly GUI tool for relational databases: MySQL, PostgreSQL, SQLite & more
Wakatime Quantify your coding. Open source plugins for automatic programming metrics.
uPyCraft IDE for programming Micropython in microntoller boards.
Mailspring Powerful n' fancy cross-plataform mail client.
Carbonize Generate gorgeous, highly customizable images from your code snippets. Ready to save or share. (macOS client for Carbon)
Appium Appium is an open source test automation framework for use with native, hybrid and mobile web apps.
Cypress.io Fast, easy and reliable testing for anything that runs in a browser.
ASCIinema Record and share your terminal sessions, the right way.
Dash API Documentation, Cheat sheets, Snippet manager with instant search everything for macOS
Burp Suite Burp Suite is a leading range of cybersecurity tools, brought to you by PortSwigger.
Apache JMeter The Apache JMeter™ application is open source software, a 100% pure Java application designed to load test functional behavior and measure performance.
Wireshark Wireshark is an open source, network protocol analyzer.
MobaXterm Free X server for Windows with tabbed SSH terminal, telnet, RDP, VNC, Xdmcp, Mosh and X11-forwarding.
ngrok ngrok secure introspectable tunnels to localhost webhook development tool and debugging tool.
Genymotion Android Emulator Cross-platform Android emulator for developers & QA engineers. Develop & automate your tests to deliver best quality apps. On desktop, AWS, GCP & SaaS.

VSCode Extensions

Extension Description
Bracket Pair Visualizer This will autohighlight matching brackets with the same colour to make it easier to identify multiple bracket pairs apart.
Auto-Save on Window Change This will auto-save code each time you switch windows; really useful for JS when switching from editor to browser window a lot.
Polacode Polaroid for your code. It's like the Carbon.
Beautify Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.
VSCode Icons Icons for Visual Studio Code (Folders and files).
Live Server Launch a development local Server with live reload feature for static & dynamic pages.
PHP Intelephense High performance, feature rich PHP intellisense. (I use it for PHP indentation).
Power Mode Your code is powerful, unleash it! The extension made popular by Code in the Dark has finally made its way to VS Code.
Rainbow Brackets Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets.
Visual Studio IntelliCode The Visual Studio IntelliCode extension provides AI-assisted productivity features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
HTML CSS Support Class and ID completion for HTML with support for remote CSS files (CDN).
VSCode Spotify Use Spotify inside vscode. Provides integration with Spotify Desktop client.
Discord Presence Update your discord status with the newly added rich presence.
Git Graph View a Git Graph of your repository, and perform Git actions from the graph.
markdownlint Markdown linting and style checking for Visual Studio Code.
Glassit-VSC A VSCode Extension to set window to transparent on Windows platform.
GitLens Useful for viewing commit history for the specific files, line. Comparing the current changes with previous commit and view the last change time when clicking on the specific line.
Swagger Viewer Allows you to display Swagger / OpenAPI specifications written in YAML or JSON in a user-friendly and interactive HTML format
Bracket Pair Colorizer This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.
Vetur This extension is useful for Vue.js development. It brings a lot of functionalities like formatting, Emmet, code snippets, linking and errors checking, debugging or highlighting the syntax
JavaScript (ES6) This is very useful visual code extention or snippet for javascript developers especially who writes code in ES6.
Import Cost This extension Display import/require package size in the editor.
Scala Syntax (Official) Visual Studio Code extension for syntax highlighting Scala sources.
:emojisense: Adds suggestions and autocomplete for emoji to VS Code.
Live Share Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building.
Debugger for Chrome Debug your JavaScript code running in Google Chrome from VS Code.
Debugger for Firefox Debug your JavaScript code running in Firefox from VS Code.
Material Icon Theme The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.
Java Extension Pack Java Extension Pack is a collection of popular extensions that can help write, test and debug Java applications in Visual Studio Code.
Dracula Official A dark theme for Visual Studio Code.
Prettier - Code formatter Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Checkstyle for Java A easy way to check problems and fix them.
Cucumber (Gherkin) Full Support This extension adds rich language support for the Cucumber (Gherkin) language.
Feature Syntax Highlight and Snippets README This extension provides syntax highlight and snippets for .feature files to enhance productivity. (and make .feature files look pretty)
Settings Sync Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
Bookmarks It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.
Auto Close Tag Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
Babel JavaScript VSCode syntax highlighting for today's JavaScript.
Angular Inline This extension extends the javascript and typescript languages to add Angular2 specific features for inline templates and stylesheets. When you define an inline template or inline style sheet using the back-tick character the content will be processed by this extension.
Blueberry Banana Blueberry Banana is an easy-on-the-eyes theme with a cyberpunkish feeling.
Highlight Matching Tag This extension is intended to provide the missing functionality that should be built-in out of the box in VSCode - to highlight matching opening or closing tags. Optionally it also shows path to tag in the status bar.
indent-rainbow This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Nim or Python.
TODO Highlight Highlight TODO, FIXME and other annotations within your code.
Trailing Spaces A VS Code extension that allows you to highlight trailing spaces and delete them in a flash!
Auto Rename Tag Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Firestore Rules Firestore security rule support for Visual Studio Code. (Works for .rule and .rules files.)
GLSL Canvas The extension opens a live WebGL preview of GLSL shaders within VSCode by providing a Show glslCanvas command. (Works for .glsl, .frag, and .vert files.)
EditorConfig EditorConfig Support for Visual Studio Code
Debugger for Firefox Debug your web application or browser extension in Firefox
Auto Import Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
Aural Coding (Keyboard sounds) A Visual Studio Code extension that creates sweet melodies based on what you type.
ESLint An extension that integrates ESLint into VS Code.

Code Playgrounds

Code Playground Description
CodePen Tool for front-end development. You can develop any HTML, CSS, modern web frameworks, javascript based code. Integrate your code to github and possible to collaborate. Features: (examples, github, adding npm packages, download the code, auto reload)
CodeSandbox You can run both front-end and back-end (javascript, nodejs, any front end frameworks). Easy to fork from github and modify the code Features: (examples, github, adding npm packages, auto reload, deploy the app)
JSBin Those who are learning vanilla JS, HTML, CSS (intermediate level). Features: (examples, adding cdn packages)
W3schools Completely for those who start front-end development. You can see the examples, descriptions and use case for each web componet. Features: (examples)
JSComplete Great playground for running ReactJS. Also very good JS, ReactJS, Node tutorials. And many more developer resources such as online books, sites, etc. Features: (examples, learning resources, auto reload, deploy the app, download the code)
JSFiddle JSFiddle has over 30 JavaScript libraries ready for immediate usage, plus you can add external files easily. For pre-processing, it has SCSS for CSS, CoffeeScript for JS and simple vanilla HTML. Features: (examples, auto reload, save code, easy collaboration, cdn packages, boilerplates)
play.golang.org The Go Playground is a web service that runs on golang.org's servers. The service receives a Go program, vets, compiles, links, and runs the program inside a sandbox, then returns the output. Features: (examples, save code, code linting)
SQLFiddle SQLFiddle is a tool for easy online testing and sharing of sql database problems and their solutions. Features: (examples, boilerplates)
PHPFiddle PhpFiddle provides Web IDE, Web Tools, APIs, Widgets, PHP Libraries, programming resources and execution environment for PHP/MySQL and HTML/CSS/JavaScript online coding. PhpFiddle allows people to test PHP code snippets, create, test and download simple applications. Features: (examples, download the codes)
Plunker Plunker is an online community for creating, collaborating on and sharing your web development ideas. Design goals for speed, ease of use and collaboration. Features: (examples, auto reload, save code, real-time collaboration, customizable syntax editor, code linting, open-source)
Repl.it Repl.it is a web-based application that offers instant programming environment for your favourite language. Features: (linting, debugger, files and live updates, hosting and Deployment)
3v4l.org 3v4l.org (leetspeak for eval) is a online PHP shell which allows you run code on more than 250 PHP versions, and compare performance, output and support of features. Features: (linting, debugger, sharing)
Trinket.io Trinket is a website that allows you to create and test code without creating an account. Mainly it is used for python but they have other languages as well. Features(examples, plans, tutorials)

Contribute to this POST here (and win hacktoberfest points)

Top comments (30)

Collapse
 
erebos-manannan profile image
Erebos Manannán

Insomnia is a better alternative to Postman insomnia.rest/

Collapse
 
edisonywh profile image
Edison Yap

Download Insomnia, so you can finally GET some REST

That tagline though. 10/10

Collapse
 
lucasgdb profile image
Lucas Bittencourt

Thanks for your suggestion, Enberg! I've added it :)

Collapse
 
nickytonline profile image
Nick Taylor
  • devdocs.io is great for API documentation and works offline.
  • MDN docs are great. If you're on a Mac and use Alfred there is a great workflow for it. That and more in My Mac Setup if you're interested.
  • npx add-gitignore for adding a git ignore file to your project for a specific language

TejasQ / add-gitignore

An interactive CLI tool that adds a .gitignore to your projects.

add-gitignore

This tiny CLI script that generates a .gitignore file for your projects.

add-gitignore demo

Usage

You'll want to make sure you have NodeJS installed on your computer. Then, setup is as simple as:

  • npx add-gitignore

If you've got an older version of node that doesn't yet have npx, here's a more traditional setup:

  • npm i -g add-gitignore
  • add-gitignore macOS Emacs node # or whatever you need

Alternatively, running just add-gitignore gives you a nice multi-select interface from which you can choose what to ignore, and using the --help flag helps you out.

Special Thanks

I hope this makes your life easier.

Made with ❤️.


  • VS Code is great. If you use it, here's my setup, although it's a little out of date.
Collapse
 
lucasgdb profile image
Lucas Bittencourt • Edited

Thanks, Taylor! I've added your suggestions in this post. Thanks again, and have a nice day.

Collapse
 
berkmann18 profile image
Maximilian Berkmann

jbt.github.io/markdown-editor/ for those who work with Markdown and GitHub which helps in seeing how it will be rendered GH-style.

Collapse
 
lucasgdb profile image
Lucas Bittencourt

Thanks for your suggestion, Berkmann! This will help a lot of people, including me.

Collapse
 
berkmann18 profile image
Maximilian Berkmann

You're welcome.

Collapse
 
argherna profile image
Andy Gherna

GitHub projects are a good substitute for Trello. Flexible enough and lets you organize where you are.

Collapse
 
dpaine20 profile image
David Paine20

Thanks for sharing the list of useful web development tools as resources. I love your article. The best part of such articles is, that the writer spends a lot of time searching this stuff, and come up with the get that it has. Here is a website I would like to suggest
url-decode.com/
You must check it out. That website contains the tools related to decode and encode (URL, base64), to minify your HTML and CSS, number utilities, unit converter, developers, string utilities, converter, and IP tools as well under one domain. That will definitely help the users.

Collapse
 
milliemill9 profile image
Camille Clifton

So useful and straight to the point. Thank you!!

Collapse
 
lucasgdb profile image
Lucas Bittencourt

Thanks, Camille!! Enjoy the post.

Collapse
 
tuandse62171 profile image
Đào Tuấn

If you are using Visual Studio Code then consider Polaroid, it is similiar to Carbon :)

Collapse
 
lucasgdb profile image
Lucas Bittencourt

Thanks, Tuấn! I've added it to VSCode Extensions.

Collapse
 
madhavgupta profile image
Madhav Gupta

PostMan for rest APIs , maybe?

Collapse
 
lucasgdb profile image
Lucas Bittencourt

Of course, Gupta! I've added it. Thanks for your suggestion!

Collapse
 
iankurbiswas profile image
Ankur Biswas

Great list man, Very useful. Thanks for sharing 😁

Collapse
 
darthknoppix profile image
Seth Corker

Good picks. Zeit Now Looks cool, I’m pretty happy with Netlify for deploying static sites via github/gitlab etc.

Collapse
 
lucasgdb profile image
Lucas Bittencourt

Great, Corker! I've added your suggestion to the post, thank you very much. :)