Chrome Extensions Every Developer should be Using
Tags: productivity, webdev, javascript, beginners
Published: 2021-04-27 09:52:15

Back in the days when I began learning to code I happened to have noticed a lot of staff from the tutorials I used to follow:  
- most sites were in dark mode,  
- they easily got the website's colors
- page colors  
Am pretty sure you have encountered similar events and perhaps wondered how they easily get these corresponding recourses they need?  

Out of this curiosity, I had to dig out what extensions they are using, and along the process, I found pretty cool and amazing extensions and I will share them with you.  

#### COOL CHROME EXTENSIONS FOR EVERY DEVELOPER  
First and foremost am sure almost every developer lives in the 'Dark mode' misconception. Of which is an amazing view to work with, So what are some themes to enable this:  
1. [Dark Mode for Chrome](https://chrome.google.com/webstore/detail/dark-mode-for-chrome/cjjfaljaaljdjknnmhoajnmgbdcchmpp)  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98unhyz52dqopolupt6c.jpg)  
With over 500k users this extension can turn on dark mode to all web pages. All you need to do is press the extension icon to enable/disable dark mode.    
Other extensions with this capability:   
       * [Night Eye](https://chrome.google.com/webstore/detail/night-eye-dark-mode-on-an/alncdjedloppbablonallfbkeiknmkdi)  
       * [Dark Theme for Chrome](https://chrome.google.com/webstore/detail/dark-theme-for-chrome/pjbgfifennfhnbkhoidkdchbflppjncb)  
       * [Night Shift Redux](https://chrome.google.com/webstore/detail/night-shift-redux/ocginjipilabheemhfbedijlhajbcabh)  
1. [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp6mmzbe10g9qr0ydu4a.jpg) 
 This is a very useful tool more so for web developers and designers. Looking for a specific color code is not easy but this tool it allows you to select a color on a page, and it gives you the color codes immediately.  
Its features include:
 
        * Eyedropper - get the color of any pixel on the page
        * Advanced Color Picker (similar to Photoshop's)
        * Ultimate CSS Gradient Generator
        * Webpage Color Analyzer - get a color palette of any site
        * Palette Viewer with 7 pre-installed palettes
        * Color History of recently picked colors    


1. [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)  
This tool does once it's installed, whenever you visit a site built using the React technology, it will show you by the extension icon 'glowing'. It also allows you to inspect react components on the site using Chrome developer tools.  

1. [WhatRuns](https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip)  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdggx5eb64whwou9g2he.jpg)  
This extension is almost similar to the React one, the only difference is that this does not only look for react but the entire technology that has been used to build a site.
It gives you site details including fonts used, framework, the programming language used if the site is running an SEO and Analytics plugin, etc.

1. [SelectorsHub](https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh) 
What this extension does, although it's largely none it's useful when you need to find Xpath and CSS selectors of a site mostly needed when doing web scrapping  

1. [Responsive Web Design Tester](https://chrome.google.com/webstore/detail/responsive-web-design-tes/enhcpefphhaiikpobimgcakinhabgiib)  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5abt1g1c89qgxicz5tj.jpg)
Responsive Web Design Tester is a quick and easy way to test your responsive website.
Test your mobile site on different devices.
This extension reflects both the size and the browser of the mobile device.
Quickly preview the design of your website at the dimensions they will be seen on popular devices. 

1. [JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh)  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eixynwiil9w67dw6dwj1.jpg)
It is a Chrome extension for printing JSON and JSONP.

1. [CSS PEEPER](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk) 
What this extension does is that allows you to extract CSS styles and build beautiful style guides. 

1. [GoFullPage](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl)  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgk209fkk96fxo4pgmbt.PNG)
Capture a screenshot of your current page in its entirety and reliably—without requesting any extra permissions!  

#### Conclusion 
Above are some extensions I often use, and I will agree they are really amazing.  
Which are you going to try out, or which are you already using?

Share other extensions down below, and let's find out how cool they are. 
If You have read this far I really appreciate, Help me to grow my community:

Also check out my other article on: 
[Must have Themes and Extensions for every Developers - Visual studio code setup](https://dev.to/larymak/must-have-themes-and-extensions-for-every-developers-visual-studio-code-setup-2igi)
[7 Best Visual Studio Code Extensions Every Web Developer Should Have.](https://dev.to/larymak/7-best-visual-studio-code-extensions-every-web-developer-should-have-2m1c) 

Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi-3a64b11ab/)  | [GitHub](https://github.com/larymak)