Best Chrome extensions for frontend development in 2021

Awesome Screenshot & Screen Recorder

What I miss about Firefox is the ease with which I could take screenshots of a web page. I think Chrome should implement this functionality natively but until that day comes I will keep using this extension.

As its name suggests, this extension allows you to take screenshots and even record videos of a complete web page or specific parts of it. It also offers the possibility of making annotations and exporting the screenshots locally or to a cloud service, totally recommended.

axe DevTools - Web Accessibility Testing

Personally I think this is the best extension when it comes to testing the accessibility of a web site and you should install it if you really care about the users that will use the site you are developing.

This extension will help you to perform full-coverage, consistent WCAG audits of all content and applications. This way you will be able to solve in an easier way the problems that your website may have and improve the experience of all the users that use it.

CodeCopy

As a developer you probably visit very often sites like StackOverflow or GitHub and probably one of the most common tasks you do on such sites is to copy code, if so this extension will be useful for you.

The only function of this small but useful extension is to allow copying snippets of code usually found on sites like StackOverflow, GitHub, Medium, MDN, npm and others. Copy code with a single click instead of selecting all of it manually.

ColorPick Eyedropper

Being able to know and select the color of some element within a web page is another feature that I miss from Firefox and that should seriously be implemented in Chrome natively, I still can't believe we have to install an extension for this.

I also find it incredible that most of the extensions of this type either do not work or consume a lot of resources making them practically impossible to use. I remember I spent a long time looking for an extension for this task until I finally found this one. I recommend it because it does what it promises and does not consume a lot of resources.

Fake Filler

This extension is very useful if you are working with forms, especially if they are very long as it allows you to fill in all the fields with a single click. It has really saved me a lot of time when testing and that's why I recommend it.

This extension is not perfect but it generally fills in the fields with the correct data type and is especially useful for generating names, emails, phone numbers and other types of data randomly.

Fontanello

Whenever I visit a website one of the things that catches my attention is the typography and when there is one that I like I always try to know what it is and this extension allows me to do just that.

Just by right-clicking on a text element I can see what typeface it is, the style and other useful information such as color, contrast level, line height and more.

JSON Viewer

As a frontend developer you often have to work with information that is in JSON format, either locally or by consuming an API. Unfortunately the visualization of this type of format is not optimal in today's browsers since they commonly display such data as plain text.

Fortunately there are many extensions that allow you to display this type of format in a more optimal way, i.e. with syntax highlighting, collapsible nodes, line numbers and more. Personally I prefer this one because in addition to these features it also allows you to choose themes which comes in handy if like me, you prefer dark themes.

OctoLinker

Whether you work on open source projects or not, this extension is useful for quickly navigating between GitHub repositories as it turns language-specific statements like include, require or import into links.

Thanks to this extension you can forget about leaving GitHub to manually search for a dependency. It links dependencies defined in files like package.json, composer.json, Gemfile or requirements.txt with their related GitHub project page.

Refined GitHub

This is another extension that further enhances the experience when working with GitHub repositories. Some of the benefits you will get by using it are as follows:

• Highlights the most useful comment in conversations.
• Reaction avatars showing who reacted to a comment
• Clickable references to issues and pull requests
• View the source of Markdown files
• Copy a file's content
• Fix merge conflicts in a click
• Adds useful links to the repository navigation dropdown and moves the "Security" and "Insights" tabs to it as well.
• Enables tab and shift tab for indentation in comment fields.
• Adds a button to @mention a user in conversations.
• And much more...

Schema Builder & Tester for Structured Data

The SEO of a website is more important than ever and an important part of this is the structured data based on the Schema standard. That is why nowadays it is very important to test and verify that the websites we develop have the necessary information of this type to achieve good results in search engines like Google.

This extension allows us with a single click to inspect the structured data of a particular web page to make sure that everything is correct and it does so by making use of the schema.org specification.

Snovio Web Technology Checker

For a long time I used Wappalizer to identify the web technologies behind every website I visited but unfortunately some time ago I realized that all the pages suffered from performance issues and finally I discovered that that extension was the culprit so I ended up uninstalling it and after a lot of searching I finally found this other extension.

I recommend this extension because it really works very well and does not cause performance issues. It is really very useful to identify the libraries, frameworks and programming languages used by each website.