loading...
Cover image for 🧰 50 Developer tools to make your life a little easier

🧰 50 Developer tools to make your life a little easier

iainfreestone profile image Iain Freestone ・9 min read

Fifty (plus) applications, chrome extensions, web apps, and everything in between that will hopefully come in handy at some point in your programming life. I will keep updated as new tools are discovered. Please feel free to add to the comments anything you find.

1. Whatruns

A free browser extension that helps you identify technologies used on any website at the click of a button.

Go to site

Alt Text


2. Sizzy

The browser for developers. Stop wasting time and speed up your development workflow

Go to site

Alt Text


3. Log Rocket

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster.

Go to site

Alt Text


4. Sentry

Sentry's application monitoring platform helps every developer
diagnose, fix, and optimize the performance of their code.

Go to site

Alt Text

5. Can I Use?

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Go to site

Alt Text


6. Prettier

An opinionated code formatter, Supports many languages,Integrates with most editors,Has few options.

Go to site

Alt Text


7. CSS Scan

Goodbye to "Inspect Element" β€” Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

Go to site

Alt Text


8. Bundlephobia

Find the cost of adding a npm package to your bundle

Go to site

Alt Text


9. Cypress

Fast, easy and reliable testing for anything that runs in a browser.

Go to site

Alt Text


10. Unminify

Free tool to unminify (unpack, deobfuscate) JavaScript, CSS, HTML, XML and JSON code, making it readable and pretty.

Go to site

Alt Text


11. RegEx 101

Free PCRE-based regular expression debugger with real time explanation, error detection and highlighting.

Go to site

Alt Text


12. Clear Cache

Clear your cache and browsing data with a single click of a button.

Go to site

Alt Text


13. Window Resizer

Resize the browser window to emulate various screen resolutions.

Go to site

Alt Text


14. Wappalyzer

Wappalyzer is a utility that uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more

Go to site

Alt Text


15. MDN

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

Go to site

Alt Text


16. Axe

The Standard in Accessibility Testing. Chosen by Microsoft, Google, development and testing teams everywhere, axe is the World’s leading digital accessibility toolkit.

Go to site

Alt Text


17. Git Graph

Git Graph extension for Visual Studio Code. View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

Go to site

Alt Text


18. Kontrast - WCAG Contrast Checker

Quickly check and adjust contrast in realtime in your browser to meet WCAG 2.1 requirements.

Go to site

Alt Text


19. Octotree

Browser extension that enhances GitHub code review and exploration.

Go to site

Alt Text


20. Postwoman

Web alternative to Postman - Helps you create requests faster, saving precious time on development

Go to site

Alt Text


21. Responsively App

Develop responsive web apps 5x faster! A must-have DevTool for all Front-End developers that will make your job easier.

Go to site

Alt Text


22. FullStory

Deliver exceptional experiences by letting our easy-to-use, intelligent software pinpoint when, where, and how user struggle is affecting your revenue and retention

Go to site

Alt Text


23. gitignore.io

Create useful .gitignore files for your project

Go to site

Alt Text


24. 1Loc

206 Favorite JavaScript Utilities in single line of code! No more!

Go to site
Alt Text


25. Does it mutate?

Go to site

Alt Text


26. Keycode

Press any key to get the JavaScript event keycode

Go to site

Alt Text


27. Worth It: Modern JS edition

This tool analyzes a page to determine how much less JavaScript is downloaded in modern browsers as a result of it using the module/nomodule pattern.

Go to site

Alt Text


28. npmview

A web application to view npm package files.

Go to site

Alt Text


29. CSS to JS

Transform between CSS, JS Objects and JSX props.

Go to site

Alt Text


30. All Characters

A simple page that shows all the different characters and their HTML code.

Go to site

Alt Text


31. Shape Catcher

This is a tool to help you find Unicode characters. Finding a specific character whose name you don't know is cumbersome. On shapecatcher.com, all you need to know is the shape of the character!

Go to site

Alt Text


32. Mocky

Don't wait for the backend to be ready, generate custom API responses with Mocky and start working on your application straightaway

Go to site

Alt Text


33. Explain Shell

Write down a command-line to see the help text that matches each argument

Go to site

Alt Text


34. Base64 Image

Convert your images to Base64

Go to site

Alt Text


35. Open Graph Check

When sharing content on Facebook and other social networks, clickattractivity is really important. An optimized preview tailored to the target group leads to significant improvements in the Click Trough Rate. Opengraphcheck.com will help you do the job best. And the most awesome thing is the Open Graph Check is for free!

Go to site

Alt Text


36. Brotli pro

Brotli. Next Level. Compression. Ready?

Go to site

Alt Text


37. Responsive Breakpoints

Easily generate the optimal responsive image dimensions

Go to site

Alt Text


38. Is my host fast yet?

Real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web.

Go to site

Alt Text


39. Check My Links

Check My Links is a link checker that crawls through your webpage and looks for broken links.

Go to site

Alt Text


40. JSON Web Token

Encode or Decode JWTs

Go to site

Alt Text


41. Git Kraken

Legendary Git client for Windows, Mac & Linux. Free for open source

Go to site

Alt Text


42. BEM Cheat Sheet

When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components.

Go to site

Alt Text


43. Can I Email

Go to site

Alt Text


44. CSS Grid Generator

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

Go to site

Alt Text


45. Screen size map

A comparison of screen sizes in device-independent pixel

Go to site

Alt Text


46. Who can use?

Who can use this color combination?

Go to site

Alt Text


47. Will it CORS?

Tell this magic CORS machine what you want, and it'll tell you exactly what to do.

Go to site

Alt Text


48. extractCSS

Extract CSS from HTML

Go to site

Alt Text


49. Metatags

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

Go to site

Alt Text


50. Shieldfy

Automatically identify and fix security issues and vulnerabilities in your code before it hits to production.

Go to site

Alt Text


51. YAML Checker

YAML Checker provides a quick and easy way to validate YAML. As you type, your YAML will be validated with beautiful syntax highlighting and error information.

Go to site

Alt Text


52. Polypane

All the tools you need to build amazing responsive, accessible and fast websites and apps in a single standalone browser.

Go to site

Alt Text


Sign up to our free weekly newsletter and stay in the loop with the latest and greatest web development projects on GitHub at www.trendingprojects.com

If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

markdown guide
 

Hey Iain, that's a great list! I noticed you missed an "n" at the end of #40, "JSON Web Toke_n_"

I'd love for you to check out Polypane. It's an app that I've been building for the past few years. It's similar to sizzy and responsively (your #2 and #21), except it does way more and has been around for a bit longer than both. It replaces all these items on your list too:

7. CSS Scan: In Polypane you can select any element and copy all the CSS with a single click, or just the CSS for a specific selector
13. Window Resizer: Polypane doesn't just show devices like other multi-pane browser, but it also parses your CSS, extracts your responsive breakpoints and makes screens from that.
16. AXE: There's a built-in accessibility panel that highlights any issues with a page, making it really easy to find and fix issues.
18. Contrast checker: Polypane's built-in contrast checker finds all contrast issues on a page and also suggest improved colors for each. I also made a free online contrast checker that implements the same technology.
46. Who can use: We implement over a dozen different "overlays" that let you check a website for various types of color blindness but also other visual impairments like glaucoma or situational ones like bright sunlight.
49. Metatags: Polypane has a "meta panel", that shows you all the relevant meta tags (making it really easy to see often overlooked typos and missing info) but also renders pixel perfect previews for Facebook, Twitter, Slack, LinkedIn, Discord and Google results. This took a lot of work to get right, but it's still the only meta preview that gets all the rendering right.

Lastly, if you want something like 45. Screen size map but for your own site, check out visualize browser sizes, which can generate something like that based on your site's Google Analytics!

 

Hi Kilian

Thank you, I had not come across Polypane before but I have just installed the 14 day free trial and I am very impressed. I also like that I can use on 3 devices, this is something I miss with Sizzy. I will try using Polypane for the next 14 days and see how I get on.

I have added your tool to the list.

For reference to others here is a screen shot with the some of the same devices as my other screen shot.

alt text

 

The overlay features in Polypane are fantastic!

alt text

 

Has anyone tried Sizzy? Thoughts?

 

Hi,

I use Sizzy a lot and from my list it one of the few I use on a daily basis. It has some great features and gets updated regularly. I was dubious at first with the monthly cost but I would say I definitely get good value for money. The photo studio feature is also great for screenshots.

For reference, this is how mine is setup but you can have as many or few devices as you want.

alt text

 

Right! From the quoted list this one caught my attention more, seems to be very useful

 

thanks, might try out in future :)

 

Have a paid plan and use it daily for front-end development. It's got some nifty features I haven't found in other places. I use the Style Debugging feature all the time.

 

Awesome list! I'll definitely be using some of them! Thank you.

 

How do you test on Internet Explorer and Safari?