Google Chrome is one of the most popular and widely used web browsers in the world. Chrome is ultrafast and supports a wide range of extensions which makes it popular among the crowd. Chrome extensions are great tools that provide you with an ability to add different additional features to your browser.
In this article, I will mainly focus on Chrome extensions for developers and designers that can you can use to improve your productivity and save lots of time.
Contents
- 25 Useful Chrome Extensions For Developers
- 1. WhatFont
- 2. Lighshot
- 3. Site Palette
- 4. TypeWonder
- 5. Wappalyzer
- 6. Sizzy
- 7. Clear Cache
- 8. Dimensions
- 9. Toby
- 10. ColorZilla
- 11. Marmoset
- 12. Corporate Ipsum
- 13. Session Buddy
- 14. Checkbot
- 15. Windows Resizer
- 16. Web Developer
- 17. Todoist
- 18. Page Ruler
- 19. Click&Clean
- 20. Keyframes
- 21. Chapi
- 22. CSS Peeper
- 23. Full Page Screen Capture
- 24. CSSViewer
- 25. RescueTime
- Wrapping Up
25 Useful Chrome Extensions For Developers
1. WhatFont
While surfing the internet, I am sure you often come across the websites where you see some catchy fonts and wonder which fonts that site is using. Previously, I used the inspect the code to identify the fonts which were time-consuming. However, you don’t have to do that anymore. WhatFont helps you determine the fonts used on a webpage by merely hovering over the HTML elements. With a single click on HTML elements, it detects the services used for serving the web fonts. It is just as simple as that. It also supports Typekit and Google Font API.
2. Lighshot
Lightshot is a sturdy and lightweight Chrome extension to take a screenshot of selected areas of a website. It also includes some tools to edit and annotate the captured screenshot. With this extension, you have options to copy the captured screenshot, save on a disk or upload to a server and share the link with others. The desktop app is also available.
3. Site Palette
Site Palette is a beautiful browser extension to generate full-color palettes. It is the extension you should not miss if you are a designer or a frontend developer. So next time you visit a website with an eye appealing color combinations, take advantage of this extension. It will extract the primary colors from the site with a click and also generates a shareable palette which you can save for future reference or share with other collaborators.
4. TypeWonder
Choosing the best font for your website is always a difficult task unless you have a list of favorite fonts. Testing out different fonts on a site by overwriting the font-family, again and again, is not an ideal approach and wastes a lot of development time. Thankfully, there is TypeWonder which allows you to test and instantly preview the web fonts on any website. Select any fonts from the list or search any Google fonts and click on Use button to preview the changes.
5. Wappalyzer
If you want to know the web technologies behind a particular website, Wappalyzer will tell you with a single click. It’s an open source project which is smart enough to detect web frameworks, content management systems(CMS), e-Commerce platforms, analytics tools and much more.
6. Sizzy
Responsive web design is one of the crucial factors for the website these days. Chrome and other browsers offer built-in multiple viewports, but it is time-consuming to process to check across various devices one at a time. Sizzy is a Chrome extension for developers to test the responsiveness of the website. It allows you to preview an URL on multiple devices at once, and provides some other functionalities like zooming, showing keyboard, landscape preview and much more.
7. Clear Cache
If you’re a Web developer, then you probably know the importance of clearing the browser cache. Clear Cache extension lets you clear your cache with just a click without any annoying confirmation dialogs or pop-ups. You can also configure to clear App Cache, Cookies, Downloads, History, Local Storage, Plugin data, passwords and much more to clear with this extension.
8. Dimensions
Dimensions is another useful Chrome extension for designers to measure the proportions between the HTML elements on a website. It can instantly measure the distance between any two HTML elements, including text, images, input-fields, gifs, buttons, videos, and icons. It is handy Chrome extension if you want to reference a website to design your website.
9. Toby
Toby is undoubtedly the best Chrome extension to manage your bookmarks and useful links. With this extension, you can easily organize all your bookmarks or links under a category and access them at any time from anywhere. It also offers sharing option to share your collections with others either publicly or privately.
10. ColorZilla
ColorZilla is one of the most popular color picker extension which was previously only available for Firefox. With this extension, you can quickly identify any color and shows the color hex value used on a website by hovering your mouse over any HTML elements. It also stores all the colored picked by you in Picked Color History.
11. Marmoset
Marmoset is a brilliant Chrome app that will take your code and output gorgeous code snapshots within seconds. It supports almost all popular languages code and offers few themes to create beautiful images from the codes.
12. Corporate Ipsum
When developing a website or design something, you need some dummy text. Corporate Ipsum is another useful Chrome extension for developers which generates some meaningful dummy filler text to populate your web contents or designs. You can customize how many paragraphs or words you want.
13. Session Buddy
Session Buddy is a Chrome extension that allows you to save and manage your sessions for later use. It also automatically records your sessions in specific time intervals. It becomes handy when you’re working on a project or doing some research online.
14. Checkbot
Checkbot is a useful Chrome extension that checks your site for broken links, duplicate titles, invalid HTML/CSS/JS codes, redirect chains and much more. After crawling through your site, it generates a detail report of your site performance and SEO factors and highlights the issues in detail so that you can get them fixed.
15. Windows Resizer
Window Resizer Chrome extension allows you to simulate different screen sizes and resolution in your browser window so that you can quickly test your site responsiveness on any viewport. The resolutions list is entirely customizable.
16. Web Developer
As the name indicates, this is a Chrome extension meant for web developers. In this extension, you can find an extensive set of useful features to boost your productivity and development process. It’s an official part of the Web Developer extension for Firefox.
17. Todoist
During the development process or projects, you often need to note down various tasks to perform. Instead of writing down on a paper or memorizing, it’s better to create a to-do list so that it helps you monitor your progress. Todoist is a multi-platform beautifully designed to-do list extension. It simple but has a mighty task manager accessible anywhere from the web across various devices and even let you collaborate with your team members.
18. Page Ruler
Page Ruler is another useful Chrome extension for web developers and designers. Page Ruler lets you measure the elements on a site and displays the width, height, and position of the component. There is also an Element Mode available to outline elements on the page as you move your mouse over them. It becomes handy to get your site pixel perfect.
19. Click&Clean
As mentioned above, it is annoying when a website does not load correctly or reflects the changes. You have to clear the browser cache so that your site loads correctly. Click&Clean makes this process faster and easier for you and provides other additional features deleting typed URLs, cookies, browsing history and much more with a single click.
20. Keyframes
With CSS animations you can make your website more interactive and engaging but to work with keyframes is not straightforward for beginners. Keyframes extension is a user-friendly and straightforward animator for your HTML elements. With a single click, you can activate Keyframes and start animating the elements and see the live action. It also generates the CSS codes that you can use in your project.
21. Chapi
Chapi is a useful Chrome extension that allows you to save web contents like texts, images, and web pages to a personalized space and refer them whenever you need them. Currently, it is in Alpha version, and more features might come in future. It is an excellent alternative to Pocket App.
22. CSS Peeper
CSS Peeper is one the best Chrome extension I have used. With this extension, you can get the site information like fonts, CSS file sizes and load time. It also provides color codes and the assets. You can also download the assets if you want with this extension from any website. The best thing about this extension is that it allows you to preview the CSS styles of HTML elements by a single click.
23. Full Page Screen Capture
You might sometime come across a situation where you want to take the screenshot of the whole page on a site. Full Page Screen Capture is another excellent screenshot capturing useful Chrome extension that you can use to take a full page screenshot of your current browser window. With Alt+Shift+P shortcut you can capture the whole page which transport to a new tab from where you can download it as an image or PDF.
24. CSSViewer
CSSViewer is another useful Chrome extension to view the CSS properties of HTML elements. To enable CSSViewer, all you have to do is click the toolbar icon and hover on any element that you can to inspect. It will provide you with all the CSS properties of that particular element.
25. RescueTime
As a developer or designer, you will mostly spend your time using your browser inspecting your code or researching for design inspirations. RescueTime allows you to track your time spend in Chrome and get the details report of your activities. Using this extension will give you an idea of how you are spending your time. You can also use this extension along with their Desktop application.
Wrapping Up
These are some of the best Chrome extensions for developers. I have personally used them on a daily basis depending upon the tasks. Among all these, my personal favorites are Site Palette, Toby, WhatFont, Web Developer and Checkbot.
Did I miss any useful Chrome extension? Do let me know in the comment below which Chrome extension do you use on a regular basis?
