33 Best Online Web Tools For Web Developers And Programmers

There are so many overlooked online tools out there, and in many cases are missed out on. This article’s intention is to aid both web developers and programmers find the best tools to make day to day operations better. 33 web tools are listed below for both beginners and experts alike.

1. StackOverflow

StackOverflow, a huge community of developers posting questions to be advised from other developers, it’s a stroke of genius. Most developers will of already heard of this absolute gem. It’s in this list of tools because it is ultimately one of the best websites to use for gaining knowledge.

I’ve lost count of how many times I’ve been stuck with my code and searched for some clues. You can bet your bottom dollar that issue has been flagged on StackOverflow before, and before you know it, you have an answer to your problem.

SO is free to use, just make sure that you search for answers before you ask one as you will be prone to some negative votes! Believe me when I say, this is an imperative tool for both front-end and back end developers, it will always come in handy sooner or later.

2. JSFiddle

Fiddle with code on the fly; just add JavaScript alone to execute or add some CSS & HTML too. JSFiddle will render your code to an output window. It’s even capable of saving versions of your code that you can repost or send to other people.

Fiddle allows CSS & JavaScript to be injected from other web addresses and can preload JQuery for you too. It’s a great tool to play around with at times.

3. CodePen

CodePen is pretty similar to JSFiddle but it each pen automatically generates website integration code that you can paste directly into your site. After rendering your webpage with the code, that ‘Pen’ will be visible, this also comes with various settings you can control too. CodePen also has user’s public designs listed on their website so you can discover some interesting mock-ups.

4. DB Fiddle

Don’t have a database on your device? Then this tool is the perfect solution, simply add some SQL Syntax wrapped around data to create a temporary table. From there you can execute SQL statements on the tables data and await the result. Choose from MySQL, Postgres and SQLLite engines to render your syntax.

5. DotNet Fiddle

DotNed fiddle allows multiple configurations in languages and project types. Choose from C#, F# and Visual Basic for the language and select the project type from the drop down, for instance MVC. After configuration, write and run your code against the dot net engine. Another quick tool without having to have the full packages installed on your device.

This fiddler has a responsive version that’s usable on your mobile or tablet device with ease. Lastly, share your code with other users by posting to twitter or emailing a link.

6. JSONLint

Another favourite of mine, this tool is invaluable when it comes to debugging JSON formatting. Lint flags exactly where you’ve missed a comma or curly brace enabling rapid remedy. Once JSONLint is happy your JSON is valid, you will be presented with a message to say its good to go. A really great web tool if your working with complicated JSON.

8. What The Font

WhatTheFont can very cleverly analyse an image of any particular text. The web app then checks it’s extensive font data for a match. If one or matches are found, the website will present a list of the closest matches fonts with the links to their source. It’s very handy if you see an image with a font you love but is no indication to what font style it is.

9. Fav Icon & Icon Generator

Upload a single image, usually a logo, this generator will parse your image and generate an icon pack with multiple sizes. Each size has its own specific purpose. Some for IOS shortcuts, Android shortcuts and the general browser favourite icon. Another speedy tool for web developers to save some time in an image editing tool.

10. W3C Validator

Validate your HTML syntax with the proper hyper-text markup language standards. W3C will analyse your HTML, then point out the exact elements, if any, that don’t validate with the correct format. It’s as simple as putting your website’s URL in and pressing the Check button. Alternatively, the option for direct pasting of code is available.

11. XDebug configure

Probably one that will only be used every time you set up a development environment but makes life so easy. XDebug is a PHP debugging module that allows full functional debugging of code in an IDE. Sometimes it’s a pain to setup, so xDebug made a page on their website where you can paste your PHP settings by printing phpinfo(). After the site analyses the PHP info settings, it specifies the exact module needed for that PHP build. In addition it even tells you how to add it to your project.

12. Monaco Editor

If you’ve heard of Visual Studio Code before, then it’s time to get excited, Monaco Editor is the intelligent engine that sits within VS Code. Now, you can actually use the Monaco Editor housed within a web interface. It even comes prepared with Intellisense and validation. Not only this, Monaco can interpret lots of languages, some of which are C#, PHP, HTML, PowerShell, Python and Objective-C.

13. JavaScript & CSS Minifier

Both JavaScript and CSS are ‘minified’ to ease website load time. Essentially, it takes all of the white space and breaks out of the files. After it’s been re-formatted, it’s pretty impossible to understand, but the size of the file will of reduced. This developer tool is very much associated with the next tool in number 14.

14. JavaScript & CSS Un-minifier

Sometimes, you download some source code from git hub or many other places around the web and sometimes, there is only a ‘minified’ version of the code inside. This tool, you guessed it, unravels a ‘minified’ JavaScript or CSS file consequently making them readable again.

15. Pingdom Website Speed Test

No one want’s to build a website that users can’t use because it’s simply to slow. This is what this tool from Pingdom is for. Enter your URL and Pindom will present you with some excellent statistics about how fast or slow your website is. It even grades your site against Google Page Speed standard and also gives you a ranking against other tested websites.

16. BrowserStack

Browserstack is an extremely powerful tool, although, you only get a thirty-minute free trial. Within this 30 minutes though, you can check out how your website renders against different mobile and tablet devices. I don’t know how they do it, but its absolutely incredible!

17.Rest Test Test

Test multiple REST calls using Put, Get, Post, Delete and more to get a real time response of your desired object. This really neat Ajax tool is free to use and should be bookmarked for when your in need of debugging any REST functionality. If you haven’t heard of REST before, check out this article.

18. Responsive Website Test

Put your URL into this responsiveness checker and see your website rendered through a series of tests. This tool is very important due to Google rolling out a ‘Mobile first indexing’ update. Google are now taking consumers ability to view a website correctly on smart devices seriously, and so should you too.

19. Google Fonts

Google have made is so easy to load a fresh font to your website for instant use. On the Google Fonts website follow these steps –

• Find a font you love
• Select it
• Google will then give you the direct links to the font files to be called from your HTML meta tags
• All’s is left to do is adjust your CSS styles to use that font family, its epic.

20. Content Delivery Network JS

CDNJS Hosts over 3000 JavaScript libraries in over 80,000 versions ready for your disposal. For example, need JQuery 1.9.1? Then find it on this site, get the link, add it to a meta tag, voila, you’ve now got JQuery! These quick delivered libraries are also really handy when using JsFiddle & CodePen.

21. Chrome Developer Tools

No doubt you’ve already heard of this, but if you haven’t then this tool will become a lifetime companion of yours. Dev tools can help your web development in a huge variety of ways. Debug JavaScript, edit CSS in real time, change HTML elements on the fly and much, much more. See this tutorial on getting started with the developer tool in Chrome.

22. Firebug for Firefox

This extension is quite similar to Chrome’s developer tools, so if you would rather use FireFox, then this browser extension is perfect. Edit and debug JavaScript and mess around with your CSS & HTML directly in the browser. Changes you make will affect your view of the website in real-time.

23. CSS Validator

Copy and paste your CSS styles directly into this ‘linter’ and await a huge range of checks to be made against your code. Checks are made for proper CSS guideline standards, flagging up if there are any problems. A very simple but invaluable tool.

24. Launchpad GraphQL Fiddle

GraphQL is a new kind of REST, it enables query-style syntax for API calls, see this article that explains it beautifully on Medium. This Fiddler allows you to play around with the GraphQL technology and write query-syntax to request data in real-time.

25. Carbon Code Screenshots

I don’t know if you’ve ever tried pasting code directly into Microsoft Word. Well, it sucks, and this web tool eradicates that problem. Simply paste in your code to this online tool and the interface will render your code in beautifully colored code. Export the code screenshot as a PNG or SVG to post to Twitter or print as a reference. The world is your oyster with this tool!

26. Sprite Image Generator

When it comes to web development, images can be a nightmare. Especially for performance, this tool helps boost performance by adding lots of single images into one big ‘sprite’. You can then use CSS background-image styles to position the exact viewpoint of the image you want to display. Consequently, you could have 20 images in one single load.

27. Google Font Typecast

Pick a font from the huge font directory from Google, then take it for a test drive to make sure it looks the real-deal. Typecast allows changing of font-size, margins, line height and much more to get a taste of a proper visual environment.

28. Can I Use?

The Can I Use tool allows querying of CSS properties and returns a vast table of browser support verification. For example, enter flexbox, and the tool will advise which browsers support it. Below the browser support table is a known issues tab, stating any know browser issues, giving you a heads up on what to look out for when designing a website.

29. Regex Pal

Regex’s can be somewhat annoying and hard to get perfectly correct. This nifty online web-interface allows execution of RegEx so you can test your syntax quickly. The best thing to this tool is that there is a ‘Top Regular Expression’ feed with other user’s saved regex’s, meaning it’s a great resource for discovering some new tricks too.

30. SearchCode

With over seven billion lines of code from seven million projects around the globe, rest-assured that a function you want a bit of real-life clarity on will be present. Search a function, property or method, you name it, this code database has it. After searching for a particular piece of code, a huge result set is returned, with that specific piece of code within some working source code, you can even drill down with filters by languages like PHP, C#, or JavaScript. Additionally, there is another brilliant feature to filter from sources like Github or GitBucket. It’s gotta be seen to be believed!

31. Code Sandbox

More tailored to the JavaScript community, Code Sandbox lets you load up a pre-configured coding environment for React, Vue, Angular, Preact and Vanilla JavaScript. This powerful tool features a snappy online IDE, ability to create files and the functionality to save and share your project. Search through their communities saved projects or create a fresh one. Enjoy the sandbox with fully functioning ESLint!

32. CSS2SCSS

Make your Cascading Style Sheets more lovable, as stated on this websites homepage. Paste in your original CSS styles and let this tool completely transform it into SCSS for you. CSS2SCSS re-formats your styles and creates variables to hold certain properties in seconds. A super-speedy useful tool.

33. Repl

Have you ever wanted to tinker with a certain technology and language set, but never got round to installing and configuring the environment needed? Then look no further, Repl.it solves this problem with their super-powerful web-interface that’s equipped with an IDE and compiler.

Repl has lots of languages to choose from including Ruby, C#, PHP, Python, ES6 and much, much more. It currently features a Beta ‘Web Framework’ selection, where you can pick any pre-configured environment for developing with frameworks like Django, Gatsby and Express. Repl comes with other general features too like saving and sharing, you could literally spend hours on this tool.