DEV Community

loading...
Cover image for 25 Useful Google Chrome Extensions for Web Developers

25 Useful Google Chrome Extensions for Web Developers

Kingsley Ubah
21 year old who writes on web development. Helping people understand software development in a simple way.
Originally published at ubahthebuilder.tech ・7 min read

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.
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

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

Web Developer Checklist

Web Developer checklist

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

Check My Links

Check My Links

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

Dimensions

Screenshot_20210615-153243.jpg

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

SVG Grabber

SVG grabber

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

View SVG Grabber Chrome Extension

What Runs

What Runs
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

Meta SEO Inspector

Meta SEO Inspector

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

45to75

45to75

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

Fontface Ninja

Fontface Ninja

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

ZenHub

ZenHub

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

Lorem Ipsum Generator

Lorem ipsum

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

Minimalist Markdown Editor

Screenshot_20210615-155229.jpg

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

User Agent Switcher

Screenshot_20210615-155847.jpg

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

MySQL Admin

Screenshot_20210615-160002.jpg

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

Web Developer

Screenshot_20210615-160142.jpg

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

Perfect Pixel

Screenshot_20210615-160307.jpg

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

MagiCSS

Screenshot_20210615-160511.jpg

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

Cookie Manager

Screenshot_20210615-160832.jpg

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

Color Tab

colortab chrome

This chrome extention generates a beautiful color scheme anytime you open a new tab.
View Color Tab Chrome Extension

Colorzilla

colorzilla

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

CSS Dig

CSS Dig

CSS Dig helps you find, group and analyze CSS style sheets and style blocks on most websites.
View CSS Dig Chrome Extension

WordPress Style Editor

Wordpress Chrome Extension

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

CSS Generator

CSS Generator Chrome Extension

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

TunnelBear

TunnelBear Chrome Extension

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

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

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:

Thank you and see you soon.

Discussion (1)

Collapse
andrewbaisden profile image
Andrew Baisden

Good list i use a few of these already.