🧰 50 Developer tools to make your life a little easier
Tags: javascript, webdev, css, beginners
Published: 2020-07-27 16:20:49

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](https://www.whatruns.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/io2e36flh7lbak4jg88z.png)](https://www.whatruns.com/)

---

## 2. Sizzy

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

[Go to site](https://sizzy.co/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/73geqjuwi6e1uksoaocb.png)](https://sizzy.co/)

---

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

[Go to site](https://logrocket.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ci3ete5gxzn3qby9fbu.png)](https://logrocket.com/)

----

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

[Go to site](https://sentry.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o9y6dnlj5u09h4runv4p.png)](https://sentry.io/)


## 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](https://caniuse.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ljyqcptdyk5bgygoszxg.png)](https://caniuse.com/)

---

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

[Go to site](https://prettier.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6u21bureeecjlpseay31.png)](https://prettier.io/)

---

## 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](https://getcssscan.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hp19t4ynedr98dce45de.png)](https://getcssscan.com/)

---

## 8. Bundlephobia
Find the cost of adding a npm package to your bundle

[Go to site](https://bundlephobia.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/skn4pre94fy3q4ezp45x.png)](https://bundlephobia.com/)

---

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

[Go to site](https://www.cypress.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zpl4pcg1tncaatywfz11.png)](https://www.cypress.io/)

---

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

[Go to site](https://unminify.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5bsecufgz7il16lo8nlt.png)](https://unminify.com/)

---

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

[Go to site](https://regex101.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m2sqz88plmzmzbcp3ign.png)](https://regex101.com/)

---

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

[Go to site](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en%20)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jycol4iy8g8p1rx0antv.png)](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en%20)

---

## 13. Window Resizer
Resize the browser window to emulate various screen resolutions.

[Go to site](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iw1x04nxpsr5w7s5la4h.png)](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)

---

## 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](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vzgqwj5j6q08ms80huaj.png)](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg)

---

## 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](https://developer.mozilla.org/en-US/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zx5xyv5nwgws5qsl1o9z.png)](https://developer.mozilla.org/en-US/)

---

## 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](https://www.deque.com/axe/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xrclziyiu2vubfq6shup.png)](https://www.deque.com/axe/)

---

## 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](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w1tjaf3iec4g65mulxf7.png)](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

---

## 18. Kontrast - WCAG Contrast Checker
Quickly check and adjust contrast in realtime in your browser to meet WCAG 2.1 requirements.

[Go to site](https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8nvykg1bu2k42o49jp0g.png)](https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk)

---

## 19. Octotree
Browser extension that enhances GitHub code review and exploration.  

[Go to site](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dodew8uacgc08wla3oo8.png)](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc)

---

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

[Go to site](https://postwoman.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y3ygksxrep4vph4uvs8d.png)](https://postwoman.io/)

---

## 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](https://responsively.app/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eppixeywg241qh1nl7ky.png)](https://xscode.com/manojvivek/responsively-app)

---

## 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](https://www.fullstory.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uge3jh88xh9n0cgovjbq.png)](https://www.fullstory.com/)

---

## 23. gitignore.io
Create useful .gitignore files for your project

[Go to site](https://www.toptal.com/developers/gitignore)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0sf6iuj0qdo53ims72ir.png)](https://www.toptal.com/developers/gitignore)

---

## 24. 1Loc
206 Favorite JavaScript Utilities in single line of code! No more!

[Go to site](https://1loc.dev/)
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v6ihza3zyjbufj14vexh.png)](https://1loc.dev/)

---

## 25. Does it mutate?

[Go to site](https://doesitmutate.xyz/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/axhfndtc5rz9lb24ajza.png)](https://doesitmutate.xyz/)

---

## 26. Keycode
Press any key to get the JavaScript event keycode

[Go to site](https://keycode.info/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/voj3s893ca07lsvzftow.png)](https://keycode.info/)

---

## 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](https://module-nomodule-calculator.glitch.me/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6sit8k507pe8096ma87s.png)](https://module-nomodule-calculator.glitch.me/)

---

## 28. npmview
A web application to view npm package files. 

[Go to site](https://npmview.now.sh/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9tl0sfv7vm6svl4rkmna.png)](https://npmview.now.sh/)

---

## 29. CSS to JS
Transform between CSS, JS Objects and JSX props. 

[Go to site](https://css2js.dotenv.dev/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z7fvom7d0izgnctqch6b.png)](https://css2js.dotenv.dev/)

---

## 30. All Characters
A simple page that shows all the different characters and their HTML code. 

[Go to site](https://aymkdn.github.io/characters/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oudkiwkbihedznwmncfs.png)](https://aymkdn.github.io/characters/)

---

## 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](https://shapecatcher.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i3k8oeti0n1e0obgo660.png)](https://shapecatcher.com/)

---

## 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](https://designer.mocky.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zjhth6dynl92uqwrrfzl.png)](https://designer.mocky.io/)

---

## 33. Explain Shell
Write down a command-line to see the help text that matches each argument

[Go to site](https://explainshell.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2h7te0igiu8hbos4x4g6.png)](https://explainshell.com/)

---

## 34. Base64 Image
Convert your images to Base64

[Go to site](https://www.base64-image.de/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/auhkkehdho786nhjhzqr.png)](https://www.base64-image.de/)

---

## 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](https://opengraphcheck.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gcj2ck3fafshu4ywfyqz.png)](https://opengraphcheck.com/)

---

## 36. Brotli pro
Brotli. Next Level. Compression. Ready?

[Go to site](https://www.brotli.pro/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9zmqc7xye4dm3hlaywt7.png)](https://www.brotli.pro/)

---

## 37. Responsive Breakpoints
Easily generate the optimal responsive image dimensions 

[Go to site](https://www.responsivebreakpoints.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nv3oub460jvml15dez08.png)](https://www.responsivebreakpoints.com/)

---

## 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](https://ismyhostfastyet.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/db5tffcwo709nhqie1ig.png)](https://ismyhostfastyet.com/)

---

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

[Go to site](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en-GB)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oz7i5wq3ns4yk57814dc.png)](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en-GB)

---

## 40. JSON Web Token
Encode or Decode JWTs

[Go to site](https://www.jsonwebtoken.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7phdt1qka2ri0can0d6c.png)](https://www.jsonwebtoken.io/)

---

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

[Go to site](https://www.gitkraken.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/seda22rvuuzbsarj02m6.png)](https://www.gitkraken.com/)

---

## 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](https://9elements.com/bem-cheat-sheet)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q6zb3h6m53ggsmahek7w.png)](https://9elements.com/bem-cheat-sheet)

---

## 43. Can I Email

[Go to site](https://www.caniemail.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ea85w4z8es916eoh9yl.png)](https://www.caniemail.com/)

---

## 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](https://cssgrid-generator.netlify.app/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oeecugj34zs0xs1sum8b.png)](https://cssgrid-generator.netlify.app/)

---

## 45. Screen size map
A comparison of screen sizes in device-independent pixel

[Go to site](https://screensizemap.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k1erwfxmubh6y65n4eq8.png)](https://screensizemap.com/)

---

## 46. Who can use?
Who can use this color combination?

[Go to site](https://whocanuse.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/96p1gs297oveqrcn4ruz.png)](https://whocanuse.com/)

---

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

[Go to site](https://httptoolkit.tech/will-it-cors/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tbqumc2wy28vs09pa2vz.png)](https://httptoolkit.tech/will-it-cors/)

---

## 48.  extractCSS
Extract CSS from HTML

[Go to site](http://extractcss.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j0v6se97lbd0jtl2px1u.png)](http://extractcss.com/)

---

## 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](https://metatags.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lj3thi6gv9w9svpdwtx5.png)](https://metatags.io/)

---

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

[Go to site](https://shieldfy.io/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9tngyo78aoczveh61n8b.png)](https://shieldfy.io/)

---

## 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](https://yamlchecker.com/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jkded8f4hm5igz9mad49.png)](https://yamlchecker.com/)

---

## 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](https://polypane.app/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4kmd5e27rsvsp2b7h92w.png)](https://polypane.app/)

---

Sign up to our free weekly newsletter and stay in the loop with the latest and greatest web development projects on GitHub at [www.iainfreestone.com](https://www.iainfreestone.com)

{% link iainfreestone/trending-projects-on-github-for-web-developers-2gjl %}

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.