10 Best chrome Extensions For Web Developers In 2021

• Facebook
• Twitter
Page Link Copied

Best Google Chrome Extensions For Web Developers

Everybody knows Google Chrome is that the hottest web browser within the globe and rightfully so. With a whopping 66 percent share within the browser market worldwide, there's no denying Chrome’s popularity despite the stagnancy in its growth over the previous couple of years. With every single release, Google is trying to form Chrome better by fixing bugs and adding cutting-edge functionalities. Moreover, web developers are turning out useful extensions for Chrome, which is additionally one of its best features- its extensibility. If you’re an online developer, the number of Chrome extensions for developers you’ll find within the store can make life easier and boost productivity for you.

From (Internet)

1. What Font

What Font is an extension that tells you what fonts a web page is being used? Clicking on some text reveals extended information like text color, font-weight, font-variant, along with sample characters in that font.

https://chrome.google.com/webstore/detail/what-font-find-font/djgfpbegnihdgbngpmhjnlchgglngcdn

2. CSSViewer

It is like What Font extension but shows extended information when hovered over an HTML element. It prevents me from constantly opening DevTools to know the styles. CSS rules are neatly categorized into Font & Text, Effects, and so forth.

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

3. LiveReload

This extension is used in conjunction with gulp-live reload, or any other live reload extensions for JavaScript bundlers, build systems, etc. If you are a Webpack, Gulp.js, Parcel user this extension is a must-have.

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

4. Site Palette

Site Palette is for the designer in you! It shows you major colors used on a web page. This is useful to get inspiration from popular websites. Although it can give slightly inaccurate colors, that's still a good thing.

https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh

5. WhatRuns

Continuing the "what" theme, the WhatRuns extension tells you vital info about a web page. Things like web server, CSS framework being used, CDN service, etc are shown including version details. Especially useful to security enthusiasts. 

https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip

6.Markdown Viewer

An extension that renders Markdown files as GitHub does. Extremely useful when writing readme files, licenses, and other documentation for your project on GitHub. Other than that, the extension also has multiple themes.

https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk/related

7. GitHub File Icons

GitHub is the most popular git services provider. We all look at many repositories thought out the day. GitHub File Icons makes GitHub a bit more cheesy by adding icons to files and directories.

https://chrome.google.com/webstore/detail/github-file-icons/kkokonbjllgdmblmbichgkkikhlcnekp

8. React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

9. ColorZilla

ColorZilla, one of the most popular Firefox developer extensions with over 5 million downloads is finally available for Chrome!

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. And it can do so much more.

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?ref=designrevision.com

10. Window Resizer

This extension re-sizes the browser's window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.

The resolutions list is completely customizable (add/delete/re-order).

You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.

The extension also features customizable global key shortcuts, an option to export your settings and import them on another computer and more!

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/?ref=designrevision.com