In this post I would like to share most popular free online web developer tools that every web developers should know. These web developer tools are used for various purpose in your web applications such as code optimization, image modification, testing APIs, validation and mobile compability issues.

Why I’m sharing these tools to all web developers?

Answer is very simple –  reinvent the wheel Developers are wasting their time and efforts in creating / modifying something that already exists.

Lets see the most popular web developer tools one by one with its unique features

Pingdom Website Speed Test

Pingdom Website Speed Test

This tool is used to test your website loading time, analyse it and suggests how to improve the loading speed of your website. No body likes your website if its loaded slowly even GOOGLE also :-P. This tool scans all parts of your web page from top to bottom such as html, js, css and images.

So use this tool and improve your website loading speed and also learn how to make it more faster by optimizing the server.

Browser Shots

Browser Shots - Test your website in different resolution

Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated server for your review.

Browsershots tests your website’s compatability on different browsers by taking screenshots of your web pages rendered by real browsers on different operating systems.

Postman – make your API development faster & easier

 

Postman API - The most-used REST client worldwide

Postman is the most popular web developer tools among API developers
  • The most-used REST client worldwide
  • Designed from the ground up to support the API developer
  • Intuitive user interface to send requests, save responses, add tests, and create workflows

Responsive Website Design Tester

Responsive Website Design Tester

Test your website on any screen size including desktops, tablets, televisions, and mobile phones.

Everyone dont want to buy each devices such as iPhone, iPad and other mobiles.

Test how responsive your website design is with this free tool. Check if your website fits and adapts tomobile, tablet, and desktop screen sizes

Alternative tool – http://quirktools.com/screenfly/

 

Google Fonts CDN

Google Fonts CDN

Google’s free font directory is one of the most exciting developments in web typography in a very long time. The amazing rise of this new font resource has made many developers to use it in their web application via CDN urls.

Currently there are  846  fonts available at Google.

.Htaccess Generator Online

Free htaccess generator online

 Hypertext Access  – simply called as .htaccess file. A directory level access file which is used to act as middleware of the web application. We can write rules to control the incoming traffic and security of our website using .htaccess

Please see my previous post on Complete Guide On Htaccess

Difference Checker

File Difference Checker Online

Diff Checker is an online diff tool to compare text differences between two text files. Enter the contents of two files and click Find Difference!

To Check difference between two files – https://www.diffchecker.com/

To check difference between two images – https://www.diffchecker.com/image-diff

To check difference between two PDFs – https://www.diffchecker.com/pdf-diff

SubLime Text Editor

Sublime Text Editor

Sublime Text 3.0 brings a refreshed UI theme, new color schemes, and a new icon. Some of the other highlights are big syntax highlighting improvements, touch input support on Windows, Touch Bar support on macOS, and apt/yum/pacman repositories for Linux. Most used editor among web developers in the world

Embed Responsively

Embed any Content into Web Page

embedresponsively.com helps build responsive embed codes for embedding rich third-party media into responsive web pages.

JSON Viewer

JSON View

Chrome Addon – It Validates and view JSON documents on the fly on the browser. Install this addon and view any json file in the browser to validate and beautify JSON.

Please check the Firefox Addon for JSON View

JPEGMINI – Compress JPG Files Online

Compress JPG Files Online

Image Size is very important factor when it comes to Page Loading Time. If your image size is very high then it will take more time to load and also there are huge increase in the bandwidth. So please optimize your images before uploading them to server.

Image optimization without reducing the quality is awesome right? yes, JPEGMINI does that. You can Reduce image size by up to 80%, without compromising quality.

Tiny PNG – Compress PNG images

PNG image Optimizer

TinyPNG is the most used web developer tools in the internet and it uses smart lossy compression techniques to reduce the file size of your PNG and JPG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

PNG is useful because it’s the only widely supported format that can store partially transparent images. The format uses compression, but the files can still be large. Use TinyPNG to shrink images for your apps and sites. It will use less bandwidth and load faster.

Picture Resize Online

Resize Any Picture Online

Picresize – you can hardly resize, crop, rotate and fip any images online. Either  by uploading images or by image url.

CSS Minifier

Minify CSS Online

This tool is used to Minify / Compress your css online. It will reduce the size of the CSS file and it save lot of server bandwidth. It will improve the loading time of your website. API also available to do it in the server level.

Javascript Minifier

Minify Javascript Online

This web developer tool is used to Minify / Compress your javascript online. It will reduce the size of the JS file and it save lot of server bandwidth. It will improve the loading time of your website. API also available to do it in the server level.

CSS Media Query Generator

CSS Media Query Generator

CSS Media Query Generator for all screen sizes including laptop, tablet and mobile devices.

Awesome Screenshot

Capture Screen Addon

Browser addon tool used to take a screenshot of a picture , screen and desktop. Annotate it with rectangles, circles, arrows, lines and text. Very useful to highlight any issues in the screen.

Firefox addon also available here – Browser Screenshot Addon

Dummy Image Generator

Dummy Image Generator

Cool tool is used to generator unlimited no of dummy images with custom texts, backgrounds, font colors and heights. We can use this tool for wireframe or mockup of an Product.

Crontab Generator

Cron Generator Online

The quick and simple editor for cron schedule expressions.  Just  copy the command and paste it in your server cron tab. You are done!

Creately Diagramming

Wireframe mockup tool used to create a database design, sitemap, User Interface and UML. Before starting any new design we should design a mockup first to get the approval from client or manager.

Conclusion

All in all, these web developer tools could really be of service, and help you achieve your short- and long-term goals. Tell us, did you like either one of them above the rest, and why so? I’m looking forward to your feedback.

Please suggest me If there are any new tool to include in this post. I’m very glad to include your tools here with backlink.

Thanks 🙂

Related Posts