25 Hand-Picked Google Chrome Extensions for Programmers

Hello folks,

Here is a big list of 25 Chrome extensions for designers and developers alike. These are also great for programmers! If you’re anything like me you love exploring new stuff, like many of these extensions were new to me and they actually made to the list.

So what’s this list all about? In this list, you’re going to find extensions that:

• Help make workflow faster
• Help your be more productive
• Save you time
• Save you hassle
• And a lot more to learn.

Before we jump into the article, I’d ask you just one favor – Could you please share this list to just one person?

#1 Web Developer

Downloads: 870,000+
TL;DR: Offers plenty of developer tools like disabling inline CSS styles, editing cookies, disabling images, et cetera.

 

 

Web Developer adds a toolbar button filled with a several web developer tools. Not only can you disable JavaScript, CSS, notifications, etc. but you can also resize browser window as per you please. You can resize window for dimensions you like. That’s just the tip of the iceburg, there are plenty of other configurations. To let you sneak into what Web Developer has got, here is a list of it’s features:

• Add, delete, edit cookies
• Delete all CSS styles, inline CSS, etc.
• Display form details, password or change HTTP request method
• Disable images, alt tag, image dimensions, etc.
• Outline frames, tables, table captions, table cells, etc.
• And a lot more.

Install Web Developer

#2 Firebug Lite

Downloads: N/A
TL;DR: A powerful alternative to Chrome DevTools

With Firebug Lite, you can edit, debug and monitor HTML, CSS and JavaScript of any page you like. It provides a treasure of web developer tools, which make debugging neat and clean. The best part? They It works in real-time. Instead of making changes to files, checking them and after lots of testing, coming to a final conclusion, you can simply save plenty of time by doing your testing in a real-time environment. Cool, right? Firebug Lite was primarily developed for Mozilla’s Firefox, so you grab it for Firefox too.

 

 

Here’s a glimpse at what Firebug Lite has to offer:

• Firebug makes editing HTML simple
• Edit CSS styles in real time
• Has a friendly interface
• Is just a keystroke away
• Can be opened in a separate window
• Provides scales for lining CSS boxes perfectly
• Monitors operations over network
• And more.

Install Firebug Lite for Chrome

#3 Season Manager

Downloads: 170,000+
TL;DR: Save a set of pages you opened as a session, access them when you like. Manages sessions you create.

Season manager lets you manage seasons. With Season Manager you can quickly save current state of your web browser. Then whenever you like, you can restore the same session. Multiple seasons can be saved at a time. You can access whichever season you like. A particular session refers to a state of web browser at a time. You can use it for saving a bunch of pages you open in morning, noon or night as a session, then access them however you like.

 

 

Moreover you can save pages you often for research, you can access them when you want.

Cool, right?

Install Season Manager

#4 PageSpeed Insights (by Google)

Downloads: 450,000+

TL;DR: Google PageSpeed Insights provided right from browser.

Speed is very important in today’s web. If you’re not over-fast, you’re slow. You don’t want to lag behind in the world where speed matters, or you do? For speed concerned, PageSpeed Insights extension by Google, Inc. is the best way to analyse a page. It helps you discover bottlenecks, analyse performance of web pages and then gives you suggestions to make them faster.

 

 

Go here, install it. To use the extension;8, open Chrome DevTools pane by right-clicking anywhere on the page and selecting Inspect Element. Once into DevTools pane, click PageSpeed tab. Click red Analyze button. There you’re with a bunch of suggestions to improve performance of your website.

A few features:

• Prevents the need to open PageSpeed Insights separately
• Not only does it suggest, but assigns priority to each suggest
• Describes each aspect of suggestions

Install PageSpeed Insights

#5 Hola Better Internet

Downloads: 5,000,000+
TL;DR: Access blocked websites.

Often times countries block certain websites most usually in the name of country censorship laws. Plus, companies and schools are also observed to put a ban on various websites. Though this might be a good move from government, company or school point of view, but guess what we sometimes desperately need access to these blocked websites. So how do we access blocked websites? We use Hola Better Internet, a Google Chrome extension.

Events like a recent one from India blocking access to Github, Vimeo, Imgur and 30+ other websites prove that extensions like Hola Better Internet are of value for web developers.

 

 

With Hola Better Internet, you can access blocked websites. But how does it work? It’s simple to use, follow following instructions:

• Install Hola Better Internet
• Then, go to blocked website
• Click the extension icon
• Now choose the country you’d like to browse from

Simple, right?

Install Hola Better Internet

#6 EditThisCookie

Downloads: 490,000+
TL;DR: Simplest cookie manager for Google Chrome.

Extension’s official tagline says it all “The first and most popular cookie editor for Google Chrome.” What it does is that it makes management of cookies easier than ever. The reason this extension made it’s way into the list is because of the fact that cookies are an important though tiny part of a typical web developer’s job. There are often times when we want to clear our cookies/cache, edit them, etc. Now with the help of EditThisCookie, we can easily manage cookies in Google Chrome.

 

 

A few of notable features:

• Add cookies
• Edit cookies
• Delete cookies
• Search a cookie
• Protect a cookie
• Etc.

Quite useful, right?

Install EditThisCookie

#7 WhatFont

Downloads: 300,000+
TL;DR: The best way to identify fonts being used.

This extension is particularly useful from web designers. The concept behind the WhatFont is that it identifies fonts for you. It’s not rare to want to emulate some fonts from that super website. Now you can, right from browser. Though there are other tools like WhatTheFont! that offer same functionality, but who wants to open a new page? Why not save time and get same job done directly from browser?

 

 

How does it work? Follow:

• Install WhatFont
• Make sure to refresh tabs
• Then hover over fonts you want identify
• Done!

Install WhatFont

#8 ColorZilla

Downloads: 480,000+
TL;DR: Best color picker for Google Chrome. Analyze webpages, pick colors, etc.

The long-awaited Firefox addon is finally available for Google Chrome. It’s a cool tool and helps web developers pick colors from any web page. Though Google Chrome has a built-in color picker (which is almost as advanced) in it’s DevTools pane, but how about an extension solely focused on that aspect? The best part about this extension is that it offers it also offers something called Webpage Color Analyzer, which aggregates all colors used on a webpage. Not only that it offers RGB and HEX codes too. It’s a cool thing.

 

 

How to use it?

• Install ColorZilla
• Refresh page you want to analyze
• Then click ColorZilla’s icon
• A list of option will appear
• Choose as you like

Install ColorZilla

#9 Page Ruler

Downloads: 200,000+
TL;DR: The ruler that helps positioning, parallelity, measure elements, etc.

I admit that Chrome DevTools offers built-in rulers for the purpose for positioning, parallelity and measuring elements. But guess what? It’s still a useful feature because it goes an extra mile and provides extra features. Chrome DevTools’ rulers are not advanced; Page Ruler extension is. Why do I think so? Well, following list of awesome features may answer:

• Draws ruler highlighted (via DevTools) element
• Shows height & width of elements
• Resize by dragging edges
• Manually modify dimensions via toolbar
• “Element mode” to outline elements
• And more.

Test it and decide for yourself. You will know which ruler is better: Chrome’s or Page Ruler’s.

Install Page Ruler

#10 Web Developer Checklist

Downloads: 27,000+
TL;DR: Analyses webpage for best practices.

Anyone who wants to make sure that his/her code follows best practices, install Web Developer Checklist extension. The premise is that it analyses a given webpage against best practices; how well a webpage is SEOed, performance-optimized, socially optimized, security-wise, etc.

Here’s a list of notable features:

• Analyses mobile-wise
• Checks SEO
• How fast/slow the webpage is
• How HTML5-compatible webpage is
• Analyses code quality
• Check presence of social tags like OpenGraph, Twitter Cards, etc.
• Etc.

 

Web Developer Checklist is based upon WebDevChecklist.com. It also shows a “best practices meter”, which is cool.

Install Web Developer Checklist

#11 Appspector

Downloads: 100,000+
TL;DR: Detects CMS’s, frameworks or libraries employed by a website.

Appspector detects CMS and/or JavaScript libraries running on a particular website. It allows you to identify the content management system working behind-the-scenes. Currently Appspector can detect over 100 popular CMS’s and JavaScript libraries. At the time of this currently, the extension cannot detect the version of a particular web framework, library or CMS, but that’s coming soon too.

 

 

How does it work?

• Install Appspector
• An icon will appear beside address bar
• Clicking this icon will show CMS, etc. detected

Install Appspector

#12 Panda

Downloads: 31,000+
TL;DR: Panda’s goal is to never let you miss anything design related.

Panda provides a daily dose of inspiration for designers. It aggregates most popular news from Designer News, Hacker News and the likes. Not only that, it also brings you with best shots from Dribbble, Behance, etc. It is a one stop for all news and inspirational dose for designers, entrepreneurs and developers alike. Previously named as Geisha.

 

 

Panda will replace your default “New tab”, so you stay on top all news. Though you can overwrite this behaviour by using their Web-base application.

Install Panda

#13 JunkFill

Downloads: 8,000+
TL;DR: Fill forms with random data for testing.

Ever needed to go to a website only to be blocked by form asking tons of questions? Or. If you’ve ever encountered fixing a form, you know testing sucks. And you don’t want to fill for the sake of filling forms. You cannot and you hate filling form again and again for testing purposes, but guess what JunkFill solves that problem. What it essentially does is: it fills forms with random data with one click.

 

 

Though there other similar extensions with either better functionality or less, but the thing that makes JunkFill special is it’s focus on quick. Other extensions let you  configure them with proper data, but JunkFill is quick and fills junk.

How to:

• Install JunkFill
• Go to form
• Click the icon
• Done!

Install JunkFill

#14 Window Resizer

Downloads: 330,000+
TL;DR: Resizes browser window to emulate screen resolutions.

 

 

Window Resizer resizes browser window to emulate screen resolutions. Especially useful for web designers and developer testing how their layouts look on different screens. These resolutions are completely customizable: you can edit, delete or add new resolutions. It comes with shortcut keys too.

Install Window Resizer

#15 Awesome Screenshot

Downloads: 1,390,000
TL;DR: Capture screenshots, annotate, crop, etc.

I have always used Awesome Screenshot. It’s a fast, simple and effective way to capture screenshots and manage them well. Not only that it also offers many editing options. It lets you annotate, blur sensitive information and make other small tweaks. It offers three ways to capture screenshot: capture visible part of page, capture entire page or selected part of page.

 

 

Few features:

• Annotate notes
• Highlight sweet spots
• Save directly to Google Drive & Diigo
• Save on the site temporarily
• Blur-sensitive information
• One-click upload to share

Try it and you will get addicted to it.

Install Awesome Screenshot

#16 Project Naptha

Downloads: 180,000+
TL;DR: Turns image-embedded text into real text. Copy, edit or translate text embedded into images.

There are two basic forms of text on the web: text in emails, webpages, tweets, etc. Then text inscribed into images. Text in emails, web pages, tweets, etc. can be copied and pasted elsewhere. But what about text in form of images? How can copy, edit or translate text embedded into images? Well you use Project Naptha for that.

 

 

Project Naptha uses state of the art algorithms to give computer a vision to read text embedded into images. You can then copy, edit or translate any such text. Ever found yourself typing from some image? Well, you’re not going to do that anymore.

How does it work?

• Install Project Naptha
• Go to any image with text
• Hover over text, a semi transparent blue color will appear as
• Highlight it, do whatever with it you please

It’s technology, buddy.

Install Project Naptha

#17 BuiltWith Technology Profiler

Downloads: 92,000+
TL;DR: Identifies technologies running behind the scenes of a website.

Find out what technologies are being used by a given website. Or what technologies are used to build a website. BuiltWith Technology Profiler helps you find out all those technologies (running behind the scenes) with the click on BuiltWith icon. The insights found out using BuiltWith can help designers, researchers and developers find out what technology a Fortune 500 company’s website is using, so they can take better decisions about implementing themselves.

 

 

How it works?

• Install BuiltWith Technology Profiler
• Go to any website
• Click BuiltWith icon
• A list of technologies employed will appear
• That’s the coolness!

Install BuiltWith Technology Profiler

#18 PageEdit

Downloads: 39,000+
TL;DR: Edit any Web page’s HTML with this WYSIWYG editor

PageEdit lets you edit any Web page’s HTML with it’s robust WYSIWYG editor. WYSIWYG is a highly feature-rich editor. With Page Edit, you can edit almost all aspects of page’s HTML.

• Edit files stored on hard drive (all file:/// URLs)
• WYSIWYG editor
• syntax color highlighting in source code editing

Install PageEdit

#19 Lorem Ipsum Generator

Downloads: 21,000+
TL;DR: Generate the world-famous lorem ipsum text right from browser.

Designers and developers are always building websites and they certainly need some demo content to give the page some real looks. But you cannot certainly start writing for the under-construction page, just so you have some meat on the page. You need lorem ipsum! Though you can generator lorem ipsum text via separate websites, but where’s the fun in that? Also why would anyone want to open a new tab, then type in address and go to a website when same thing can be done by an extension right from browser.

 

 

How it works?

• Install Yet Another Lorem Ipsum Generator
• Click the icon in question
• Now input word count & number of paragraphs
• Done!

Install Yet Another Lorem Ipsum Generator

#20 Image Downloader

Downloads: 215,000+
TL;DR: Want to download images in bulk? Image Downloader answers your call!

You certainly must have been in a situation when you had to download lots of or multiple images from Web page. This task must be time-consuming and often boring. Save time and your energy by using Image Downloader for Chrome. It is a Chrome extension that lets you download images in bulk. Not only that, you can see the images that a page contains or links to. You can also filter them by width, height, etc. Select images to download by clicking. Customize image display etc.

 

 

 

Here’s how it works:

• Install Image Downloader
• Go to a page full of images
• Click the icon
• Configure settings accordingly

Install Image Downloader

#21 RescueTime for Google Chrome™

Downloads: 78,000+
TL;DR: Value your time? Then you will value RescueTime app. It tracks everything.

For web designers and developers, time is of paramount importance. After all, it comes limited. There’s no way you can get more than 24 hours in a day (contact me, if there is!). So we are constantly fighting the concept of time. We try to be productive, do get more stuff done in less time, etc. There are a good number of time tracking applications as well as Chrome extensions. But of all I have tried, RescueTime is the best.

 

 

Here are a few notable features:

1. Categorizes time spent as Very Distracting, Neutral, Productive, etc.
2. Tracks minutes + seconds spent on every website
3. Tracks time on apps/softwares
4. Compares day to day, week to week, etc.

How it works:

• Install RescueTime
• Download RescueTime app (if you want to track softwares too!)
• Create an account
• Verify account
• Happy time-tracking!

Install RescueTime

#22 TabJump

Downloads: 65,000+
TL;DR: Manage tabs. Access closed tabs, associated tabs and most visited tabs.

Designers and developers are always inundated with tons of stuff that they cannot afford to miss out. So they obviously have 20-30 tabs at a time open, so it’s a no-brainer that things get unorganized and ugly. Even worse concentration get diluted. So in such a digital environment, it gets even difficult to actually get anything done. So there comes TabJump extension, making things easier.

How it works:

• Install TabJump
• An icon will appear beside omnibar
• Click it and enjoy

Install TabJump

#23 TooManyTabs for Chrome

Downloads: 320,000+
TL;DR: Too many tabs? But all important and lost focus? TooManyTabs helps.

Ever tried working between 20-30 tabs at a time? You can’t even see favicon displayed, let alone titles! To stay sane, TooManyTabs is a must. It helps managing tabs. There are many useful features that TooManyTabs offer.

 

 

A couple of features:

• Suspend idle tabs and save memory
• One glimpse at all tabs
• Also view content of page
• Restore recently closed tabs, etc.

If there is one extension to choose about managing tabs, choose this!

Install TooManyTabs

#24 Forget Me

Downloads: 16,500+
TL;DR: Testing? Clear cache, cookies, history, HTML5 local storage etc. of a website.

Testing a particular feature or tweak on a website’s design can be deceiving and maddening experience when not sure if your cache/cookies are clear! So there comes Forget Me, which makes testing things pretty straightforward. It clears cache, cookies, history, etc. belonging to a website. So the next time you’re going to test something, make sure you have got Forget Me in your arsenal.

 

 

A few features:

• Clears cookies/cache
• Clears history
• HTML5 local storage
• HTML5 local session

Install Forget Me

#25 User-Agent Switcher

Downloads: 129,000+
TL;DR: Makes switching between user-agents easier.

Basically it does mimics user-agents or browsers, like Mozilla’s Firefox, Internet Explorer, Safari, etc. These user-agents’ strings can be used to test features or appearance of your website. So go ahead and test features with user-agent you like. Extremely helpful for website with audience using diverse set of browsers.

 

 

• Install User-Agent Switcher
• Go to any you want to test
• Right-click, select User-Agent Switch
• From drop down, select any user you like!

Install User-Agent Switcher

Conclusion

Finally.. the article concludes and you’ve come to know about 25 Google Chrome extensions for designers and developers. All of the above extensions, I like RescueTime the best. After it tells you what you’re really upto throughout the day.

Concluding the article, I’d like to ask you what’s your favorite Chrome extension? Let’s have a discussion that means something. 🙂