25 Useful Google Chrome Extensions for Web Developers
Tags: webdev, tooling, programming
Published: 2021-06-17 14:53:48

Google Chrome is currently one of the most popular and widely used web browsers in existence with about 2.65 billion users according to  [backlinko](https://backlinko.com/chrome-users). 
It is an even more popular choice for web developers and web development. One good reason for that is it's rich collection of very handy browser extensions geared to make developers more productive.

Below are 25 handy chrome extensions every web developer should consider installing in his or her browser:

### Validity


![Validity](https://cdn.hashnode.com/res/hashnode/image/upload/v1623938598254/oLmGJiYa4.jpeg)

Validations are a core part of web development. With this chrome extension, you can validate your HTML document and carry out test for common errors like wrong attributes and syntax errors.

[View Validity Chrome Extension](https://chrome.google.com/webstore/detail/validity/bbicmjjbohdfglopkidebfccilipgeif?hl=en-GB)

### Web Developer Checklist


![Web Developer checklist](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939337379/F2Q0ojay2.jpeg)

There are practices a web developer must consider while building websites but sometimes the web developer forgets one of this rule.
Web developer checklist helps you adhere to common best practices by analyzing your page for any pitfalls.

[View Web Developer Checklist Chrome Extension](https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp)

### Check My Links

![Check My Links](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939373135/Qhzy7pZ99.jpeg)


Keeping track of links is one of the most tedious tasks for web developers. 
Thankfully, there is a tool to do this. Check My Links crawls your web page as it scans and checks for broken links.

[View Check My Links Chrome Extension](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf)

### Dimensions

![Screenshot_20210615-153243.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939408390/AsomDrNH6.jpeg)

Being a great developer entails creating inch-perfect elements and images.
Dimensions can be used to measure the dimension between elements on your page.

[View Dimensions Chrome Extension](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj)

### SVG Grabber

![SVG grabber](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939431396/WfDxL4PiC.jpeg)

This extension helps you preview, download and copy the code of all SVG icons and illustrations on your page.

[View SVG Grabber Chrome Extension](https://chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg)

### What Runs


![What Runs](Upload failed. Please re-upload the image)
A typical web page constitutes many technologies.
What Runs is a Chrome extension used to detects and identify what programming languages, JavaScript frameworks, plugins, Web server software, cms, CDN, fonts etc that a web page is using.

[View What Runs Chrome Extension](https://www.whatruns.com/)

### Meta SEO Inspector

![Meta SEO Inspector](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939516859/kdV5FwzMX.jpeg)

SEO is very important principle for ranking websites. This extension inspects a pages meta properties such as HTML meta tags, canonical attributes, no-follow links etc while browsing through it.

[View Validity Chrome Extension](https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef)

### 45to75

![45to75](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939559670/64336H-9x.jpeg)

Maintaining an appropriate font size for your app is a crucial task for Front-end developers.
With this extension, we can always ensure that the text remains readable across different devices. It gives you so much control of your site’s texts.

[View 45to75 Chrome Extension](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf)

### Fontface Ninja

![Fontface Ninja](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939578025/54pVCHBAc.jpeg)

There are possibly thousands of fonts available today. Fontface Ninja helps you identify any kind of font on a website. You can also download it.

[View Fontface Ninja Chrome Extension](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf)

### ZenHub


![ZenHub](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939625940/MAA-RPaYr.jpeg)

This is a project management extension for gitHub. It helps in managing all gitHub activities right from the browser environment. Your team can also see every changes made to the project all from the same interface.

[View ZenHub Chrome Extension](https://chrome.google.com/webstore/detail/zenhub-for-github/ogcgkffhplmphkaahpmffcafajaocjbd)

### Lorem Ipsum Generator


![Lorem ipsum](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939655832/_BxM_VXo0.jpeg)

There are times during web development that we want to test an input yet don't have the time to type a legit text.
This very handy extension quickly generates default text as a placeholder for a real text.
[View Lorem Ipsum Generator Chrome Extension](https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb)

### Minimalist Markdown Editor


![Screenshot_20210615-155229.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939693097/7I75DyodA.jpeg)

Markdown is one of the most popular text format. Most content-based platforms enable the use of Markdown to format texts.
With this extension, you can write markdown and see a live preview of what it looks like.

[View Minimalist Markdown Editor Chrome Extension](https://chrome.google.com/webstore/detail/minimalist-markdown-edito/pghodfjepegmciihfhdipmimghiakcjf?hl=en)



### User Agent Switcher


![Screenshot_20210615-155847.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939728865/E6qYTDPeN.jpeg)

When you request for a page on your browser, the request header sent contains the user Agent: information which is typically the browser type.
This extension allows you switch between two or more user agents. This helps you check out how your web page is rendered across different browsers.

[View User Agent Switcher Chrome Extension ](https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg)

### MySQL Admin


![Screenshot_20210615-160002.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939761791/XYgx7SWOb.jpeg)

Managing a MySQL database from the command-line is not only a bit difficult but requires knowledge of the command-line.
Thankfully, with MySQL Admin, you can manage MySQL databases in a very easy and Intuitive way with a GUI.

[Install MySQL Admin Chrome Extension](https://chrome.google.com/webstore/detail/chrome-mysql-admin/ndgnpnpakfcdjmpgmcaknimfgcldechn)

### Web Developer


![Screenshot_20210615-160142.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939800995/Nxhl0MfUQ.jpeg)

This chrome extension adds an array of useful tools that every developer needs to make websites to the web browser.

[View Web Developer Chrome Extension](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)

### Perfect Pixel


![Screenshot_20210615-160307.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939831038/yq4Ey7Hqq.jpeg)

Imagine if you compare every single pixels on imagine with that of another image. Well don't imagine, we have a tool that does just that.

[Install Perfect Pixel Chrome Extension](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)

### MagiCSS


![Screenshot_20210615-160511.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939862177/65F5G0lmg.jpeg)

MagiCSS is a live CSS editor extension, with inbuild editor, css syntax autocomplete, syntax highlighting, autogenerates CSS selectors with point and click and SASS compilation.
[View MagiCSS Chrome Extension](https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol?hl=en)

### Cookie Manager


![Screenshot_20210615-160832.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939886577/uPQzVlTQZ.jpeg)

Cookies is a small storage mechanism on the client browser where we can store information about that user.
Cookie Manager allows you add, delete and search for cookies on a site.
[View Cookie Manager Chrome Extension](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg)

### Color Tab


![colortab chrome](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939912051/WJni180qpq.jpeg)

This chrome extention generates a beautiful color scheme anytime you open a new tab.
[View Color Tab Chrome Extension](https://chrome.google.com/webstore/detail/color-tab/hchlgfaicmddilenlflajnmomalehbom?hl=en)

### Colorzilla


![colorzilla](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939960591/99i-uF6CU.jpeg)

This handy extension comes with features like eyedropper, color picker, pallette viewer and gradient generator all to make you web design process very easy and no-cody.
[View Colorzilla Chrome Extension](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)

### CSS Dig


![CSS Dig](https://cdn.hashnode.com/res/hashnode/image/upload/v1623939983774/9KX8KNjK6.jpeg)

CSS Dig helps you find, group and analyze CSS style sheets and style blocks on most websites.
[View CSS Dig Chrome Extension](https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco)

### WordPress Style Editor


![Wordpress Chrome Extension](https://cdn.hashnode.com/res/hashnode/image/upload/v1623940009424/cJA0MxZZ5.jpeg)

If you are a WordPress theme developer, you should know that manually editing the CSS on your website is quite tedious. Thankfully, this extension makes everything significantly easier.
You can make direct edits to the CSS of your theme in WordPress right from the browser with this extension.
[View WordPress Style Editor  Chrome Extension](https://chrome.google.com/webstore/detail/wordpress-style-editor/bgdpllcnhcmpfcheafdhimpklhjoommn?hl=en)

### CSS Generator


![CSS Generator Chrome Extension](https://cdn.hashnode.com/res/hashnode/image/upload/v1623940026371/XtBI5nVbh.jpeg)

This extension automatically generates all the code you need for your CSS in an easy and fast way. No need to start writing code.
[View CSS Generator Chrome Extension](https://chrome.google.com/webstore/detail/css3-generator/dmlgmehijaodgkkooghkknjjkddahmej?hl=en-GB)

### TunnelBear


![TunnelBear Chrome Extension](https://cdn.hashnode.com/res/hashnode/image/upload/v1623940049043/hNLpi6VbN.jpeg)

TunnelBear provides you a VPN so you can test your across from various virtual servers around the world. You also don't have to worry about blocked websites, online tracking and other privacy issues. All geared towards safe and secure browsing experience.
[View TunnelBear Chrome Extension](https://chrome.google.com/webstore/detail/tunnelbear-vpn/omdakjcmkglenbhjadbccaookpfjihpa?hl=en)

> 
FINAL NOTE: HTML To React is an ebook guide for beginners to learn web development even if you know nothing but HTML. Check it out  [here](https://gumroad.com/a/834147443) 

These 25 are all very useful even though there are a lot other handy extensions out there.

If you found this helpful and would like to support, you can buy me my favourite fruit:

<a href="https://www.buymeacoffee.com/ubahthebuilder"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a pineapple&emoji=🍍&slug=ubahthebuilder&button_colour=e0b51a&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"></a>

Thank you and see you soon.