This article was published 2 years ago, therefore the contents of this post may be out of date.

Browsers are increasingly incorporating more extensions, plugins and add-ons, which are often developed by their users, making the browser more powerful, and help us increase our productivity.

The majority of us use Chrome. And it makes sense to consider Chrome extensions. There are other browsers are available. But Chrome is used by 63% of internet users. While it isn’t big on privacy it surely aces productivity!

If you are on the hunt for some new extensions. Today’s post is here to show you a list of the 18 best Chrome extensions that will help make work easier for you.

1. BrowserStack

Browserstack is a Chrome Extension

BrowserStack is a useful Chrome extension for web developers. This extension allows you to test your work with different browsers.

Install the extension. Open your page in Chrome then select BrowserStack and lastly select a device option from the tab. Then the page will then be rendered using an emulation of a browser on that device. Simple but very effective. However, you’ll need a BrowserStack account for it to work properly though.

2. Wappalyzer

Wappalyzer is a Chrome Extension

Wappalyzer is an effective tool for identifying the underlying technologies behind web pages. It identifies web services, CMS type, analytics tools, JavaScript libraries and a whole host of other apps and services.

Once the extension is installed. Select it while on a page. Then a popup window will appear highlighting all identifiable apps running on that page.

3. Githunt

Githunt is a Chrome Extension

Githunt is valuable if you spend a lot of time on GitHub looking for new projects to work on. Rather than depending on GitHub’s trending projects feed. This extension brings it to the front by highlighting all trending projects in a new tab.

Within this extension, you can search projects in different languages. Read a brief project description and the number of current open issues. Then simply select the project within the tab to go to the project and inspect further.

4. Fonts Ninja

Fonts Ninja is a Chrome Extension

Fonts Ninja works for you to identify fonts within a web page. It is a useful extension.

Install the extension, and you should see a small green ninja icon in your toolbar. Open a web page in Chrome. Select the icon and hover over a font you want to identify. Then you should see an overview popup and an individual popup over the highlighted font.

5. Window Resizer

Window Resizer is a Chrome Extension

Window Resizer is a useful extension for web developers. It is simple but effective. Especially when working with responsive apps. It will resize any screen you are working on to a range of screen sizes. The most common sizes are covered with mobile, tablet, desktop and the emulation are somewhat accurate.

6. ColorPick Eyedropper

Colorpick Eyedropper is a Chrome Extension

ColorPick Eyedropper is a neat extension as it can quickly identify any colour on any web page. And it can zoom in, so you can even select a border 1px wide. You may not use it every day but it’s handy.

If you decide to install this neat extension, you simply select the colour wheel icon to activate it. Your cursor will change to a crosshair. Highlight the section you want to identify, and you should see the RGB values and the hex appears.

7. CSS Viewer

Cssviewer is a Chrome Extension

CSS Viewer is a smart extension for developers. This extension shows you the CSS properties of a given page when you hover your cursor over it. A small popup window appears showing you the CSS data that makes up the element your cursor is hovering over.

8. React Developer Tools

React Developer Tools is a Chrome Extension

React Developer Tools are specifically for the open-source React JavaScript library. So, if you work with React, then this extension is here to help you inspect the library as required.

Once you’ve installed the extension. You should see two icons appear in the toolbar. One is for Components and the other is for Profiler. Components show you what React is using on the page, while Profiler shows you performance data.

9. Check My Links

Check My Links is a Chrome Extension

Check My Links, it does exactly what it says. This extension is a super-simple way to check for broken links. It also can check for valid links and re-directed links along with broken ones.

Once installed, you should see a small checkmark icon up in your toolbar. So load your page, select the icon and a popup window will appear with all links assessed. It may take a while or a few seconds depending on the size of the page, but it works flawlessly.

10. Daily.dev

Daily.dev is a Chrome Extension

daily.dev can make your lives much easier. It is a news aggregator that specialises in development news. It showcases a page full of news stories, blog posts and also useful pages on your chosen subject(s).

As it acts like a start page and news aggregator. Select an item on the page to visit that page. Each will open up in a new tab and will be a mixture of news, reviews, advice, how-tos etc that help us grow as developers.

11. Web Developer

Web Developer is a Chrome Extension

Web Developer is a suite of tools within a single extension. This tool is fitting for general devs. As it comprises a range of useful tools that any dev can use.

I would highly recommend that you should install this one. Web Developer is available by using the small cog icon. You should see a small dropdown box appear with a range of options organised into tabs.

12. EditThisCookie

Editthiscookie is a Chrome Extension

EditThisCookie is a helpful Chrome extension for devs. This enables you to edit, delete, create and protect cookies on a per-page basis. Also, it lets you export them for analysis, block them, import them into JSON and generally do as much as you could need to do to a cookie.

This is a useful tool as it gives you the ability to search and read cookies.

13. Web Developer Checklist

Web Developer Checklist is a Chrome Extension

Web Developer Checklist is an amazing developer extension that gives you a checklist of all the things that need to be completed on a page before launching it live.

This is another extension that you should install and once have. You will see a code icon appear in the toolbar. Select it while on a page and a popup will appear with best practices you need to complete before launching. It includes SEO, mobile, usability, accessibility, social, performance and other selectable measures.

14. Dimensions

Dimensions is a Chrome Extension

This extension is called Dimensions. It’s a dynamic measure that uses your mouse. It’s useful if you want to measure spacing, dimensions, gaps between page elements. But also anything else you see on the page.

You will see a small crosshair icon on your toolbar if you decide to install this extension. Open a page in Chrome. Select the icon and you should see a crosshair appear on the screen. Move it around to the place where you want to measure. And you will see exact dimensions appear by the cross.

15. Lorem Ipsum Generator

Lorem Ipsum Generator

The Lorem Ipsum Generator is one of the best Chrome extensions full stop as it quickly delivers default text to complement your design.

Once, installed the extension, select it within a page. Tell the extension how much Lorem Ipsum copy you want. Then it will generate and you just copy it from the window and Paste it into your page and you are done.

16. JSON Viewer

Json Viewer is a Chrome Extension

JSON Viewer is here to help manage JSON data into a quickly recognisable hierarchy view within a browser window. Working with raw JSON data is fine. But using this extension makes the code easier to work with and use.

17. Coolors for Chrome

Coolors For Chrome is a Chrome Extension

Coolors for Chrome is here for those times you are struggling to choose a colour palette for your design. Once you’ve decided to install this extension. It will replace the default tab with a tab of a colour palette of five different colours.

However you can generate a different colour scheme by pressing the space bar on your keyboard. It even has an option to lock your favourite colours to avoid replacing that colour while generating the new colour scheme. Also insert your own colour code and lock it to generate a colour scheme related to that colour.

18. Clean Master

Clean Master is a Chrome Extension

How many times have you changed a setting? And wondered why has the change been reflected on screen?

You are not alone, that is why Clean Master is such a useful Chrome developer extension. Install the extension and select the small brush in your browser to clear the browser cache. This tool does what it’s supposed to do and well.

Share

18 Best Chrome Extensions for Web Developers