69 fantastic free web tools


SVGOMG is an online tool for optimising SVG. Under the hood SVGOMG uses the incredibly powerful command-line tool SVGO to perform optimisations, but SVGOMG does so while visually showing you any changes the optimisation has made to an image.

55. Yarn

Yarn is a package manager. It works much the same as Node Package Manager (npm). Yarn caches every package making it incredibly fast to download and install dependencies, and with all of the same packages as npm so you can easily make the switch.

56. BetterBoilerplate

The BetterBoilerplate offers a scaffolding for any new project. It’s packed full with build tools, file management and a robust CSS framework. The BetterBoilerplate is development environment agnostic and can be used for any project from small brochure websites to full SAAS projects.

57. Browsersync

50 free web tools - Browsersync

Browsersync is a powerful tool for synchronised cross-device testing and live debugging

Browsersync is like LiveReload, but on steroids. It's a powerful tool for synchronised cross-device testing that will live-reload your project for every edit and save in all browser instances. It even syncs up navigation and scrolling in the browser sessions. You can add CSS outlines for debugging, and a latency option enables you to mimic a slower internet connection.

58. Google PageSpeed Insights

Google Page Speed Test is an online tool used to analyse a website and give a score based on performance. You start by entering the URL of your website and running the test, Google will then suggest ways in which the site’s performance can be improved.

59. Vue.js DevTools

Vue.js has optional devtools, which enable you to inspect component states, track events and access all of the data held in the virtual DOM. This is extremely useful when working with Vue.js and is a much nicer alternative to console logging all of these things.

60. Web Developer Toolbar

The Web Developer toolbar has been around for almost as long as web design has, but it’s still really useful for web development today, offering a number of really handy tools, from deleting cookies to displaying an image’s alt text.

61. Gulp

Gulp takes care of repetitive tasks

Gulp takes care of repetitive tasks

Gulp is a frontend build tool used to perform any number of functions from compiling Sass to building SVG sprites. Gulp will save you time and perform a lot of the repetitive tasks required, enabling you to concentrate on writing code and building applications.

62. Grunt

This frontend build tool is used in the same way as Gulp, with the aim of saving you time and effort when building the frontend of any website or app. These tools have become an important part of frontend development due to their ability to perform repetitive tasks.

Next page: Best of the rest

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Steven Roberts

Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.