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) |
Top comments (30)
Insomnia is a better alternative to Postman insomnia.rest/
That tagline though. 10/10
Thanks for your suggestion, Enberg! I've added it :)
My Mac Setup
Nick Taylor
npx add-gitignorefor adding a git ignore file to your project for a specific languageAn interactive CLI tool that adds a .gitignore to your projects.
add-gitignore
This tiny CLI script that generates a
.gitignorefile for your projects.Usage
You'll want to make sure you have NodeJS installed on your computer. Then, setup is as simple as:
npx add-gitignoreIf you've got an older version of node that doesn't yet have npx, here's a more traditional setup:
npm i -g add-gitignoreadd-gitignore macOS Emacs node # or whatever you needAlternatively, running just
add-gitignoregives you a nice multi-select interface from which you can choose what to ignore, and using the--helpflag helps you out.Special Thanks
I hope this makes your life easier.
Made with❤️ .
My Visual Studio Code Setup
Nick Taylor
Thanks, Taylor! I've added your suggestions in this post. Thanks again, and have a nice day.
jbt.github.io/markdown-editor/ for those who work with Markdown and GitHub which helps in seeing how it will be rendered GH-style.
Thanks for your suggestion, Berkmann! This will help a lot of people, including me.
You're welcome.
GitHub projects are a good substitute for Trello. Flexible enough and lets you organize where you are.
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.
So useful and straight to the point. Thank you!!
Thanks, Camille!! Enjoy the post.
If you are using Visual Studio Code then consider Polaroid, it is similiar to Carbon :)
Thanks, Tuấn! I've added it to VSCode Extensions.
PostMan for rest APIs , maybe?
Of course, Gupta! I've added it. Thanks for your suggestion!
Great list man, Very useful. Thanks for sharing 😁
Good picks. Zeit Now Looks cool, I’m pretty happy with Netlify for deploying static sites via github/gitlab etc.
Great, Corker! I've added your suggestion to the post, thank you very much. :)