One of a good things of being a Google Chrome user is that we can go to Chrome Web Store for an extension. We can explore and add any extensions from the Chrome’s repository that are best suited for our job.

If you are a web developer or designer, there are also plenty of extensions you can rely on a specific task such as inspecting the hexa color of a web page, measuring the dimension of certain web or checking what technologies behind a web you refer to.

You don’t have to add too many extensions as it can encumber your browser and your computer generally. Pick wisely the ones that you really need.

Below are the top 15 Google Chrome extensions that you can consider to support your job as a web developer/designer.

1. Firebug

If you ask your fellow web developers if they use Firebug, chance that they will say yes. Firebug is a famous tool in the web developer scope. You can use this tool for debugging HTML source of a website and also change the CSS parameter to be previewed in the real time. Most web developers love using this tool as it’s lightweight and easy to use. Aside of Chrome, this tool is also available for Firefox.

2. ColorZilla

If you have a favorite website and get inspired to create the similar one, you can start analyzing the element that website using ColorZilla. The purpose of this tool is to help you in the color-related tasks such such as inspecting the hexa code of a certain color, picking the color, analyzing the color of a web page and a lot more.

3. BuiltWith

As a web developer you sometimes need to explore the web to get some inspiration for a website you want to build. It’s not illegal to see what technologies behind a site such as web server, CMS, advertising platform and a lot more. This will also help you keep up to date over the latest technologies in the internet industry.

BuiltWith is developed to help you get any information you need related the technologies used by a website you refer to. You can get the information you want using this tool with a single click.

4. Highly Highlighter

There are tens of collaboration tools to use out there. Highly Highlighter is among the examples. With Highly Highlighter you can easily highlight a certain word on a website and share it your colleagues to be discussed later.

5. CSS-Shack

Developing a website has never been truly far away from CSS. CSS-Shack make it easy for developers turn a design they have created to a CSS file to be used on the website they are developing. CSS-Shack comes with a handy interface. The extensions supports layers and has a lot of features to help you finish the CSS-related task.

6. Evernote Web Clipper

Another handy tool for teamwork. Evernote Web Clipper allows you to record a webpage, whether it’s entire page or certain part, and annotate it in order to be discussed with your team member. This will be useful when you accidentally find a good site and want to make it as an inspiration for you next web project. Since it’s developed by Evernote, you can also going further with your clip on Evernote.

7. Font Playground

A handy tool to play with fonts. Font Playground helps you to choose the best font to be used on your web project. This extension features a live preview which is very useful to select the fonts. You can preview the fonts on any existing sites like YouTube, Facebook, CNN. Any site. So that you can imagine how will your site looks like once applied a certain font. Font Playground also includes all the different font weights, styles and text effects so that you can visualise your webpage before you implement the changes.

8. Window Resizer

Everything is all about mobile these days so developing a responsive website is a must. When developing a site you need to preview the look of each site when is seen from various devices with different screen size. This is the role of Window Resizer. The extension helps you to instantly resize the browser to a precise size that fits to devices such as smartphone, tablet and laptop.

9. What Font

Another great tool to play with fonts. But, What Font use a different approach in helping you choosing the font. While Font Playground helps you previewing font before it’s truly implemented, What Font helps you identifying the name of a font used by a certain website. This will be helpful when you accidentally stumbled upon a nice-look web and you want to know the font that is used by that site. Just hover over any text within the site and you will see the font name is a tiny pop-up. Clicking on it will give you more details about the font.

10. Yslow

A nice-look website is nothing when it’s has a poor load. Yslow helps you testing the overall performance of your website, including how fast it’s to be loaded. Interestingly, the extension also tells you what is slowing it down (if any). Yslow features a score to evaluate your web performance.

11. Web Developer

Web Developer features a number of tools to help you build your website. The extension provides a toolbar button to Chrome with a lot of useful web developer tools. Some tasks you can do with this tool including checking the look of a website without CSS, preview the display of a website in the various devices and a lot more. Apart from Google Chrome Web Developer is also available for Firefox.

12. Page Ruler

You can use Page Ruler to precisely measure the element of a certain site like width, high and the margin among parts of the website. Imagine this case. You want to provide a certain display ads spot that will be located at the right side of your site. To implement that, the first thing you need to do is conducting a simple research to find out the common size of display ads in the market. This is how Page Ruler will help. You can rely on it to measure the size of display ads you want to offer the spot for.

13. Web Developer Checklist

There are so many requirements to be fulfilled by a web developer in building a website. Isn’t it?.

Apart from performance and appearance, a website should also meet other standards including SEO. Web Developer Checklist helps you to ensure there is nothing missed on your website.

14. DevTools Autosave

It would be a huge lose when you close a text editor but hasn’t saved the change you made. DevTools Autosave make it easy to save every change you made over your codes. Whether it’s on you local storage or over the internet.

15. Instant Wireframe

If you curious enough about the wireframe of the websites like Facebook or Twitter, you can use Instant Wireframe to check them. This extension helps view web pages, whether local or live on the web, with a wireframe overlay.