10 Useful Chrome Extension For Web Developers And Designers

When it comes to development Google Chrome is the primary browser for most of the developers and why it shouldn’t be if it is extremely helpful in boosting the coding productivity. Within just 10 years Chrome has proved that it is well ahead of other browsers like Mozilla Firefox, Microsoft Edge, Safari, Opera, etc. One of the main reasons behind its popularity is the chrome’s built-in developer tool and the huge set of extensions that have made the developers and designers task easier and faster.

10-Useful-Chrome-Extension-For-Web-Developers-And-Designers

There are a lot of extensions that developers can use to boost their productivity. Depends on the task you can choose the extension and add in your browser. Every developer has a different choice according to their need but we are going to mention some common extensions that can be useful for most of the web developers.



1. JavaScript and CSS Code Beautifier

A web developer has to check the source code daily and when you view the source code in your browser it looks like a messy code that includes a lot of CSS and JS files. This extension makes the javascript and CSS code much more readable. For example, just take the source code of minified CSS and Javascript file (which is really messy and not readable) and use this extension. You will see the magic of using it and you will find your file much more readable with proper indentation, space, and colored text. Don’t forget to explore its options to change the theme, font and lot of stuff.

Before using extension:

After using extension:

JavaScript-and-CSS-Code-Beautifier-Chrome-Extension

2. Web Developer

This is one of the most popular extensions with more than 1M users. This extension makes web development and debugging a lot easier and it is useful for both the designers as well as developers. The tool has a button where you will find different categories or tabs like Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize and Tools. Each of these categories includes some more options that allow you to do multiple things. You can disable javascript/plugins/notifications/images/cookies/style, you can edit the CSS, you can find broken images, you can hide images and a lot of things you can do with forms, information and other options available in this toll as well. Add this extension in your browser and take advantage of the available tools.

Web-Developer-Chrome-Extension

3. Awesome Autocomplete for GitHub

A lot of developers use Github account and this extension is really useful for them. Using this extension gives you the advantage to check all the available options if you search something in the Github search box. This extension autocompletes the Github search box and gives you multiple suggestions that are helpful in finding a lot of repositories as per your search result. You can also find active users in the option. For example, if you search React, you can find a lot of React repositories and active users. If you remove the extension, you won’t find anything in the autocomplete option.

Awesome-Autocomplete-for-GitHub-Chrome-Extension

4. Postman

Postman is not an extension it’s an app that is really helpful in making HTTP requests to servers. If you are building RESTful APIs or working with REST APIs then you can make requests such that GET, POST, DELETE, PUT and other requests. Postman is really helpful for developers in testing APIs. You can select the request from the options available there, enter the endpoint or URL you want and you can send the request. Check-in detail about this app from the link Introduction to Postman for API Development


Postman-Chrome-Extension

5. Marmoset

This is also an app that is not used in development but if you are a developer then sometimes you may have to add the snapshot of your code in your project or for representation purpose. This app allows you to do this and it takes the code you want and turns it into an image. It creates a beautiful code snapshot. You can also find the option to change effects, languages or themes. So if you want to create a beautiful code snapshot for your project or website then add this in your browser.

Marmoset-Chrome-Extension

6. Window Resizer

Building a responsive application is one of the major parts of the development and this awesome extension is basically used for building and testing responsive applications. It uses specific sizes that you can quickly choose to resize your browser window and check your site on different displays. You can check your site view for mobiles, iPad, desktop, iPhone and other devices. You can also add your own device size here and check if your media queries are working fine for different device sizes or not.

Window-Resizer-Chrome-Extension

7. ColorZilla

This extension has more than 2M users and it started with firefox initially but now it’s available in chrome as well. This is one of the best color picker and an eyedropper extension. The extension allows you to pick any color used on a webpage by using its color picker. You just have to hover the mouse on any pixel and you will get the color code used over there in RGB HEX formats. You can also create palettes and generate gradients using their color tools. It also allows you to check the color history of picked colors.

ColorZilla-Chome-Extension

8. Lorem Ipsum Generator

When you are building an application or website we often need to fill some dummy content to check what the actual project will look like for example, if you are working on the blog post in an application you will have to test your project filling some dummy content and there you can use Lorem Ipsum as a sample text to fill in the blog post for testing purpose. This extension work in those cases and you can quickly generate sample text. You can also change the number of paragraphs and number of the sentence as per your need.

Lorem-Ipsum-Generator-Chrome-Extension

9. Wappalyzer

This is really a cool and popular extension among developers. This extension helps you to identify the different technologies used in any application or website. It detects automatically all the tools and technologies like javascript frameworks, libraries, plugins, site generators, databases, server software, CMS, widgets, analytics tools, etc. So this is a very nice and useful extension for those developers who are curious to know about the tools and technologies being used in any application or website.

Wappalyzer-Chrome-Extension

10. Momentum

This extension has nothing to do with development or programming. It’s actually a productivity extension that can be used to make your day productive and energetic. Once you will add this in your browser and you will open a new tab you will see a fresh beautiful high-quality image, it will give you the time, it will give you the information about the weather and you can also add your todo list in the bottom right corner. A very good extension for developers and for everyone to make the day productive.

Momentum-Chrome-Extension

Other Extensions:



My Personal Notes arrow_drop_up

Web Developer, Technical Content Engineer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.