Looking for Chrome Extensions to increase your Productivity as a Web Developers / Web Designers / Programming?

I will sharing to you the best Chrome Extensions that many Developers use and recommend that you should also know, this will save you so much time and made you much more productive as a Web Developers / Web Designers / Programming.

Whatever it is you might be creating, this 12 Chrome Extensions will ensure that your work is faster when you are starting off as a Web Developer or even if you're still a student. So, make sure to install these extensions to make your work as productive, helpful and organized as possible.

Let's visit Chrome Web Store - Extensions to find the extensions we're going to install. Don't worry if you don't already understand how to install chrome extensions, I'll show you the video. Hopefully this can help you.

Okey.. I think, now you guys already understand how to install it.
So, let's get on this chrome extension list. ~~

1. CSS Peeper
   CSS Peeper will make it easier for us to see CSS from an element / inspect element of a particular page. And the cool thing is when you don't click on something you can find out the pallete colors and assets used on the website as a whole.

2. Stylebot
   Stylebot is almost similar to CSS Peeper but different from both, here we can edit the CSS directly and see directly the changes in our HTML Elements without need to open the inspect element or the code editor first. Btw this is not permanent okay, although after we refresh the website it doesn't change. To restore it you can disable the toggle and it will return as usual.

3. ColorPick Eyedropper
   ColorPick Eyedropper is a one of a kind eyedropper tool that allows you to select color values from webpages and anywhere on the screen through it's uniquely fish-eyed zoom preview lupe for pixel perfect precision.

4. WhatFont
   Sometimes when we look at a Website, we can be interested in the type of font they use. But sometimes we don't know what the name of the font is. And when we search for it manually, it will take a lot of time.

   WhatFont extension will help and make it easy for you to do it with just one click. With this extension, you can check web fonts simply by hovering over them and you can easily get font information about the text you are hovering on.

   WhatFont also detects services used for serving the font. And now supports Typekit and Google Font API. It's a simple and elegant one.

5. Dimensions
   Dimensions is a tool for designers to measure screen dimensions. If you want to measure distances between elements on a website you should try this extensions.

6. Kontrast - WCAG Contrast Checker
   It is commonly used to check the Contrast of an Element on the Web. This is to see if the contrast of an element is good or not. This needs to be considered related to readability, if the contrast is bad then this can be difficult to read by users.

   Kontrast extension that let you quickly check and adjust text and background contrast in RealTime in your browser to meet the standards of Web Content Accessibility Guidelines (WCAG) requirements.

7. Wappalyzer
   Wappalyzer can identify web technologies so with this extensions you can find out what websites are built with instantly reveal the technology stack any website, such as CMS, ecommerce platform or payment processor, as well as company and contact details.

8. BuiltWith Technology Profiler
   The function of this extension is similar as wappalyzer, which is to identify web technology. But there are usually some sites that are not readable by wappalyzer or vice versa with this extension, then BuiltWith Technology Profiler can be an alternative to use in conjunction with Wappalyzer.

9. Mobile simulator
   Mobile simulator extension will make it easier for us so that we don't need to go into inspecting elements, to test Mobile Responsive Websites with several models device. IAnd you can also directly make the screenshoot so that it will look cooler and interesting if you want to be sent to the client.

10. Lipsum Generator
    Lipsum Generator can be used to create random text when we need text to fill out a form on a website or when creating a web design. You will have a different lorem ipsum text based on your previous settings every time you open the extension.

11. Placeholdifier
    This is will convert a website into a live wireframe as if its web becomes a placeholder to hide personal information when we are streaming, demo or so on.

12. Dark Reader
    Dark Reader is night mode for all websites. We can use Dark Reader when we want to know a website if using dark mode. With this extension a website that does not have dark mode can have dark mode. We can keep our eyes using dark mode for surfing day and night.

Those are the best 12 Extensions that we can install into our Chrome to help our activities as a web designer or web developer to increase productivity.

So which extensions are your favorites? Or if you have any other extensions that you usually use as well, please share them in the comments field so we can find out as well.

Let's study together every day! ~ ✨