If you’re a developer or designer, you will likely already have a collection of favourite Chrome extensions you use on a daily basis. Extensions that make life easier, make you more productive or perform an essential task better than a dedicated tool. This list may build on that collection.
As the vast majority of us use Chrome, it makes sense to consider Chrome extensions. Other browsers are available but Chrome is used by 68.7% of internet users. While it isn’t big on privacy, it certainly aces productivity!
We polled our own team and asked every dev we know for their list of Chrome developer extensions they use regularly or would suggest.
What follows is a curated list of the best Chrome extensions for developers around right now.
These may not be the most popular extensions but they have been tried, tested and not found wanting by the Astra team!
The Best Chrome Extensions
Must-have Chrome extensions for web developers:
- Wappalyzer: Identify the technologies powering any website.
- HTML Validator: Check HTML code for errors and ensure proper syntax.
- JSON Viewer: Render JSON data in a human-readable format.
- Web Developer Checklist: Get a checklist of best practices for web development.
- React Developer Tools: open-source React JavaScript library.
Must-have Chrome extensions for web designers:
- BrowserStack: Live cross-browser testing that lets you preview your website in various browsers.
- Window Resizer: Simulate different screen sizes and resolutions.
- Clear Cache: Easily clear browser cache and refresh pages.
- Lorem Ipsum Generator: Quickly generate placeholder text for your designs.
- CSS Viewer: Inspect and analyze CSS styles applied to elements on a webpage.
If you prefer to watch or are on the move, this post has been turned into a high quality video.
The video is less than 5 minutes long and sums up the best Chrome extensions for developers perfectly!
Each extension in this list is tested and regularly used by our in-house developers and designers to increase their work efficiency.
There’s sure to be something here you could use!
1. WhatFont
WhatFont is a very useful Chrome extension for developers and designers who need to identify fonts used on web pages. It’s fast, effective and identifies individual fonts within a page in seconds. It also identifies the family, size, weight and colour. All within a small popup window in the browser.
WhatFont is ideal for web developers who like to collect examples of great pages they might want to emulate in the future. It’s small, doesn’t use many resources and well worth using. It hasn’t been updated in a while but still works perfectly.
1,000,000+ users
Rating: 3.5/5 for usability
2. Fonts Ninja
Fonts Ninja works in a similar way to WhatFont to identify fonts within a web page. It’s a useful alternative if WhatFont isn’t working out for you for any reason. It works in much the same but has a smaller interface. Otherwise, the two extensions look and feel very similar.
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. You should see a page overview popup and an individual popup over the highlighted font. Simple but very effective.
300,000+ users
Rating: 3.5/5 for usability
3. ColorPick Eyedropper
ColorPick Eyedropper is a Chrome addon tailored to web designers.
This magnifying glass for colors is a super handy tool. It lets you easily identify and select any color on a webpage, even zooming in to capture tiny 1px-wide borders.
While you might not use it daily, having it in your toolkit can be a real-time saver.
Once you install ColorPick Eyedropper, 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 appear on the right of the screen.
1,000,000+ users
Rating: 3.5/5 for usability, zero for UX design
4. Window Resizer
Window Resizer is an incredibly useful Chrome extension for web developers. It’s simple but very effective, especially when working with responsive designs or apps. It installs into Chrome and will resize any screen you’re working on to a range of popular screen sizes. Extensions like Window Resizer help in developing responsive WordPress themes that look great on desktop and mobile devices.
Most common sizes are covered, mobile, tablet, desktop and the emulation seems very accurate. The guys here use Window Resizer a lot and rate it highly. That’s good enough for us!
600,000+ users
Rating: 4.5/5 for usability and simplicity
5. BrowserStack
BrowserStack is another exceptionally useful Chrome extension for web developers. Like Window Resizer, this extension allows you to test your work for responsiveness. Rather than different screen sizes, this extension lets you test with different browsers.
Install the extension, open your page in Chrome, select BrowserStack and select a device option from the tab. The page will then be rendered using an emulation of a browser on that device. Simply but very effective. You do need a BrowserStack account for it to work properly though.
100,000+ users
Rating: 3/5 usability is high, the requirement for an account is a definite mark against it.
6. CSS Viewer
CSS Viewer is another simple but very effective Chrome extension for web developers. As its name implies, this addon shows you the CSS properties of a given page wherever you hover your mouse. A small popup window appears showing you the CSS data that makes up the element you’re pointing at.
Whether you want to create simple WordPress themes or modern and complex ones, this is a very smart extension that makes short work of identifying key CSS properties anywhere you point your mouse.
100,000+ users
Rating: 4/5 for simplicity and ease of use
7. Lorem Ipsum Generator
Lorem Ipsum Generator is one of the best Chrome extensions full stop. It does what its name suggests it does. It generates filler text for demo websites and does it well.
Simply install the extension, select it within a page, tell it how much Lorem Ipsum copy you want to generate and copy it from the window. Paste it into your page and you’re done.
20,000+ users
Rating 4/5 for ease of use
8. Compose AI
Compose AI is an extension that can generate diverse text using AI. Using it is really straightforward.
After installing the extension it will seamlessly integrate it into your workflow. Simply type // in the place where you want to add the content, and ask it for what you want!
400,000+ users
4 stars out of 5
9. Ghostery
Chrome is a great browser for many things but privacy is not among them. Ghostery aims to help with that. It’s a privacy extension designed to block intrusive ads, stop tracking, prevent data collection and block all those page elements that slow you down.
While Ghostery doesn’t provide any useful tools for web development, it keeps your browsing experience clean and makes everything faster. Every Chrome user should install Ghostery!
2,000,000+ users
Rating 5/5 for effectiveness
10. Wappalyzer
Wappalyzer is a very effective tool for identifying the underlying technologies behind web pages. It quickly identifies web services, CMS type, web analytics tools, plugins, JavaScript libraries and a whole host of other apps. If you want to know the secrets behind a page, this is one way to find out.
Just install the extension, select it while on a page and a popup window will appear highlighting all identifiable apps running on that page.
1,000,000+ users
Rating 4/5 for usefulness and clear UI
11. Clear Cache
How many times have you modified a setting and wondered why the change wasn’t reflected on screen? You’re not alone, which is why Clear Cache is such a useful Chrome developer extension.
Install the extension and select the small recycle icon in your browser to clear the browser cache. There are no confirmations and no extra dialogs to contend with. This tool just does what it’s supposed to do and we can all move on. We love it for that.
800,000+ users
Rating: 4.5/5 for simplicity
12. HTML Validator
HTML Validator is a quick tool for checking your HTML within a browser. There are hundreds of HTML tools out there and you’ll likely have a bunch of them already. But HTML Validator is genuinely useful for quickly validating markup within the browser.
Install the extension, open a developer window on the page and navigate to the HTML Validator tab. All your HTML goodness is displayed within with errors at the top.
30,000+ users
Rating: 4/5 for usability but there is lot of competition out there
13. React Developer Tools
React Developer Tools are specifically for the open source React JavaScript library. If you work with React, this extension helps you inspect the library as required.
Install the extension and you should see two icons appear in the Chrome toolbar. One is for Components and the other for Profiler. Components shows you what React is using on the page and Profiler shows you performance data. If you work with React, this is an essential tool to have!
4,000,000+ users
Rating: 4/5 for ease of use for a niche library
14. JSON Viewer
JSON Viewer is an alternative to JSONView and helps manage JSON data into a quickly recognizable hierarchy view in a browser window. Working with raw JSON data is fine when you have the time, but using this addon makes the code easier to quickly absorb and use.
It’s a small Chrome developer extension but it’s well worth checking out. With over 800,000 users and glowing reviews, this is definitely an extension to try.
800,000+ users
Rating 4/5 for reliability and ease of use.
15. ColorZilla
ColorZilla is a superb Chrome extension for designers to get website color codes. It includes an eyedrop colour selector, a colour history tool, a CSS gradient analyzer and a page analyzer that assesses colours on a web page.
If you come across a website whose palette resonates, this tool helps you identify the combinations or individual colours in seconds. It’s an essential extension for anyone who deals with colour on the web.
2,000,000+ users
Rating: 4/5 for usability and productivity
16. Dimensions
Dimensions is a dynamic measure that uses your mouse. It’s a very useful Chrome developer extension if you want to measure spacing, dimensions, gaps between page elements and anything else you see on the page.
Once installed, you’ll see a small crosshair icon on your toolbar. Open a page in Chrome, select the icon and you should see a crosshair appear on screen. Move it around where you want to measure and you’ll see exact dimensions appear by the cross. Simple but very effective.
100,000+ users
Rating: 4/5 for usability and productivity
17. Page Ruler
Page Ruler is similar to Dimensions in that it’s a dynamic measurement extension. While Dimensions can measure the height and width of elements, it is more useful for measuring between them. Page Rule measures those elements very accurately.
When you need to measure something, select the ruler icon so it turns orange. The page fades, allowing you to draw the element you want to measure. The extension will then present the exact measurements of the element in a small popup box beside it.
20,000+ users
Rating: 4.5/5 simple but takes a minute to figure out how to use it
18. UX Check
UX Check is a usability analyzer that assesses a page using Nielsen’s 10 heuristics. It can quickly highlight potential usability issues and enables you to add notes, take a screenshot and export the findings ready to share within the team.
UX Check is a very effective way to perform lightweight user testing without going into too much detail. Ideal as a first pass test before handing a project off for full testing.
30,000+ users
Rating: 4/5 for productivity and ease of use
19. Check My Links
Check My Links does exactly what it says on the tin. It’s a super-simple way to check for broken links. It can also check for valid links and redirected links as well as broken ones. While technically a dev tool, this Chrome developer extension could be useful for SEO and other specialities too.
Once installed into Chrome, you should see a small checkmark icon in your toolbar. Load your page, select the icon and a popup window will appear with all links assessed. Depending on the size of the page, this might take a few seconds but it works flawlessly.
200,000+ users
Rating: 4.5/5 for usability across web disciplines
20. Web Developer Checklist
Who doesn’t love a checklist? Web Developer Checklist is a Chrome developer extension that gives you a checklist of all the things that need to be completed on a page before publication. It’s a very useful add-on for busy developers.
Install the extension and you’ll 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 publication. They include SEO, mobile, usability, accessibility, social, performance and other selectable measures.
A true lifesaver.
40,000+ users
Rating: 4/5 for ease of use and usefulness
If you’re new to a web development, this extension can significantly enhance your work journey.
21. Checkbot
Checkbot is similar to the Web Developer Checklist in that it checks a page for links, errors, security, performance, SEO and a range of other considerations. It’s a very useful tool that adds to your repertoire and can be useful for a last pass before publication.
Checkbot installs in the same way all extensions do. Once done, select the blue icon to bring up the sidebar. Use the menus there to select the type of test you want to perform and the results will be displayed on the page.
30,000+ users
Rating: 4/5 for covering basic tools and adding basic security checks
22. Web Developer
Web Developer is a suite of tools contained within a single Chrome extension. While titled ‘Web Developer’ we think this tool is suitable for general devs too as it contains a range of useful tools that any dev can use.
Once installed, Web Developer is accessible using the small cog icon in the toolbar. Once selected, you should see a small dropdown box appear with a range of options organized into tabs. Select a tab to access the tools within. There is a lot going on here but each tool is genuinely useful.
1,000,000+ users
Rating: 4/5 for having so many tools for so many tasks
23. EditThisCookie
EditThisCookie is an exceptionally useful Chrome extension for developers. It enables you to edit, delete, create and protect cookies on a per-page basis. It also lets you export them for analysis, block them, import them into JSON and generally do as much as you could possibly need to do to a cookie.
The most useful tool is the ability to search and read cookies. Devs will find most of the tools useful at one point or another.
2,000,000+ users
Rating: 3.5/5 for sheer number of things you can do with a cookie
24. Lightshot
Lightshot is another of those Chrome developer extensions that could be useful for all kinds of people. While devs will likely use it a lot, UX testers. user testers, instructors, graphic designers and all kinds of users will make great screenshots with this tool.
Once installed, open the page you want to screenshot and select the feather icon. Drag and drop the cursor across the area you want to capture. Select from the popup menu that appears and save the shot.
Rating: 4/5 for being simple but very effective
25. Session Buddy
Session Buddy is another generalist tool useful for developers and any type of web user. It’s a ‘save it for later’ tool that can save all open tabs in a single session for later access. It is useful when you come across something you want to read later or for protecting productivity if you use multiple tabs.
Once Session buddy has been installed, select the small icon from the toolbar to see all your open tabs. You can select the icon after a browser crash to recover all tabs and save the session to load later. A very useful tool for any web user!
1,000,000+ users
Rating: 4/5 for protecting the world against browser crashes
26. Daily.dev
daily.dev isn’t a productivity tool per se, but it does make our lives much easier. It’s a news aggregator that specializes in development news. It showcases a page full of news stories, blog posts and useful pages on our chosen subject.
Daily acts like a start page and news aggregator. Select an item on the page to visit that page. Each opens in a new tab and will be a mixture of news, reviews, advice, how-tos and all the good stuff that keeps us growing as developers. This is an excellent extension to use if you like to stay current.
40,000+ users
Rating: 4.5/5 for bringing all our news into one place
Summary
This compilation showcases the best Chrome tools to ensure you’re armed with an arsenal of resources to elevate your craft.
The boundaries are quite loose and you can find tools that cater to developers and also to designers.
That is why we have decided to show them all uncategorized. We don’t want you to overlook tools you might otherwise discard but can help you in your daily work.
Do you have a beloved Chrome extension? Have a go-to addon to help web development and design? Share them below if you do!
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
I personally use some of above extension on my daily duties.
I can say that these are very useful extensions for web developers. As they make your work so much easy.
Great list of extensions, defiantly suggest to try them out.
Awesome article, I have tested few of above extensions and those are pretty good. It was taking me hours to do simple work manually.
Great addition to my browser, Thanks.
Clear cache extension is really handy, when it comes to web designing.
I definitely suggest it for web developers.
This extensions are the best for Web Developers and help to reduce work load.
Love this extensions, can’t live without theme.
Useful chrome extensions, make your daily hard work life easy.
I personally like ‘web developer’ chrome extension, as it can done multiple task and very handy.
Awesome article! Very helpful.
Looking forward to many more helpful articles.
This article made my life easier. Had fun reading and my interest really arose after reading this article. Kudos to the authors!
Probably the best article I’ve ever read! Good job everyone.
One of the best articles I’ve read.
Applause!
One of the best articles I’ve read.
Applause! Amazing!
I just love #4 from this listing. I’m just into colors these days. Loving it a lot! I hope more features for the next articles and other ideas for a website!
Thanks guys!
This article did make my life easier. All the listings were very helpful. Chrome extensions are a lot more if you only read what this article has to say. This will build up your website and collection of thoughts on how to be more productive.
Check it out guys!
Listings in this article are the most helpful ones I’ve had. Really been confused on this Chrome Extensions since the day I started using it. But after reading this article, it became clear to mind and definitely a must have!
Good job to the authors of this article!
It takes a lot of authors to come up with an article that is worth of reading. This one’s definitely a must-read article!
Kudos to the authors for all the effort and knowledge about the Chrome Extensions. This really helped a lot.
Really had a hard time understanding but because of this article, my life was made easier. I can now fully understand the function of the extensions and what are the importance of having this and that.
Thanks to this article! mlooking forward for the next one.
Great article,
I’m going to give several of these a try.
As this is a WordPress related site, I’d add the Scan WP chrome extension to the list alongside Wappalyzer which is more general than WP specific.
Just my 2 cents.
Cheers.
This is a really good compilation of extensions for newbies to make our lives easy, especially the Whatfont is a boon to us, you get to know what fonts are used on sites/ Keep updating. Thanks to whoever made this list on the editorial team.
Hello Kurian,
Glad you found it useful! 🙂
I would definitely recommend LinkedIn Hashtag-Chrome Extension[Link Redacted] for better curating LinkedIn posts. Hashtags are important to reach out to specific people, and this extension helps immensely!
Thanks for sharing your inputs! 🙂
I loved working with some of these excellent extensions. These extensions made my job a lot easier; thanks for the great list.
Cheers, Shaun!
thanks alot of information goodjobs