30 Powerful Chrome Extensions for Freelance Web Developers

As a freelance web developer, you probably find yourself spending a lot of time in Chrome working. You work in a fast-moving industry and keeping on top of things can be challenging.

Browser extensions are known as software programs, which help in customizing the browsing experience and they are a great way to improve productivity.

Web developers need to be efficient to deliver solutions on time. Further, as a freelance web developer, you spend time designing user interfaces, attracting potential clients, looking for new projects and communicating with clients.

I was hired many times as a freelance web developer and came across an array of tools designed specifically for web professionals. In this blog post, I am going to present Chrome extensions, which I use to optimize my overall workflow.

Feel free to reach out to me or leave a comment, if you think there are better tools or some tools are missing in this blog post.

Why Google Chrome?

There are two main reasons why every web developer should use Google Chrome as a main browser.

• Google Chrome, is without a doubt, the most popular browser in the world (currently more than 50%). Chrome is well ahead of other major browsers such as Mozilla Firefox, Safari, Opera and Microsoft Edge.
• If you need a browser extension for a specific front-end library, in most cases you will find extension only for Chrome browser.

Google Chrome has a built-in set of web developer tools Chrome DevTools, which provides lots of functionality for web development. You can debug CSS and JavaScript, prototype CSS, use Lighthouse audit tool to analyze load performance and more. Even these tools are not always enough. Chrome extensions extend the current functionality of what Chrome DevTools provide.

Whether you’re an experienced programmer or just want to start with web development, I recommend you to check the video below. You can find useful tips on how to use Chrome DevTools effectively.

I’ve organized the blog post in three sections – no-coding tools, development tools, and web design tools. Let’s dive into the first section and look at the first tool.

No-coding tools

In this section, you can find various tools, which help you boost productivity in consuming and organizing new content. However, let’s start with the first tool, which helps you get more freelance jobs.

Page Monitor

I mentioned this extension in one of my previous articles. Page Monitor is a browser extension that monitors web pages for changes in the background.

Why do you need Page Monitor?

It allows you to monitor many web pages with job listings. If a new opportunity pops up, you are notified and you are able to send a freelance proposal among the first candidates.

Grammarly

Grammarly is an essential addition to everybody’s writing toolbox. It helps you to write and communicate with your clients more effectively. It’s a grammar and spell checker that works in your browser and can correct your spelling and grammar mistakes anywhere you input text.

Their extension integrates very well with Google Documents, Gmail, Linkedin, Twitter, WordPress Post Editor and many other places you write on the web. Grammarly displays correction suggestions, which you can ignore or accept and automatically correct the mistake.

Linkclump

Linkclump makes you more productive in searching when you browse the internet. It allows you to open multiple links by pressing z key and dragging the mouse over the links.

When is this action useful?

If you are searching on Google, you get a lot of search results and you want to open only the relevant search results. Relevant results are usually the first several links. What you usually do is pressing ctrl/cmd + click to open in a new tab on every link. With this extension, you can do this by a single action.

OneTab

OneTab is a useful extension for users of any type, who are dealing with many tabs open. Web developers need to learn new technologies and libraries and they conduct research for a piece of content frequently.

When I learn something new I open a lot of articles and end up with a lot of Chrome tabs open. Having many tabs open can start taking a huge amount of memory. Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list.

Search all tabs

Search all Tabs is another extension, which makes you more productive when you are looking for specific content. Every browser provides a standard search function, which allows you to find a specific term on a web page. If you try to consume a lot of new content and you open a lot of Chrome tabs, you cannot search a specific term on multiple tabs. This extension is a solution for this and allows you to find matching terms in all opened tabs.

Pocket

Pocket is a useful tool for saving articles, videos or audio recordings to consume content later. Pocket offers an extension for all major browsers. If you open a blog article, which you want to read later, just hit the pocket icon in the browser toolbar and the article is saved in Pocket. Then a small pop-up window lets you know your article is saved and you can add tags to help in easy exploring and retrieval of content.

If you open an article in Pocket, you can see it in a “distraction free” version. This modification makes reading articles more pleasant compared to the original version with a lot of advertisements.

Pocket offers more than a browser extension. You can use their standalone application to read articles offline, or you can read articles in your leisure time on its mobile application. Additionally, you can use Text-To-Speech (TTS) feature in the mobile version to listen to articles instead of reading. You can start reading anywhere and change the reading speed.

Pocket also allows you to discover stories based on your article sources and reading habits. Further, you can explore the most popular stories, explore stories based on your interests or a specific topic.

Evernote Web Clipper

Evernote is a SaaS designed for taking and organizing notes. It offers a lot of note-taking funtions and my favorite feature is Web Clipper. While you are browsing the internet, Evernote Web Clipper allows you to save website screenshots. You can save a blog article as a full page, simplified article or a screenshot. You can also save a specific part of the article.

It can be hard to find valuable content again over time because positions of web pages are changing in searching engines or websites can be dead. In this case, it is a good idea to save it in Evernote, because it is available for you offline in the original version. You can access notes from Evernote standalone or mobile application.

You can organize saved articles into notebooks and add the tags. Evernote is able to selectively clip the portion you need from Gmail, LinkIn, Amazon.

Besides saving webpage screenshots, Evernote allows you to attach PDF and office documents. If you need to annotate your notes or edit images, you can use Evernote tool Skitch.

New tab extension

Initab is a chrome “new tab” extension for web developers, which replaces the default new tab page with useful data and information. It displays popular posts from your popular subreddits, GitHub or GitLab issues and pull requests and your Stack Overflow history. Relevant history section allows you to see articles or blog posts you’ve visited related to a specific technology. Additionally, this extension allows you to see trending Github repos or public Gists related to your account.

Alternatively, you can try Devo extension, which is more lightweight and brings the content from GitHub Trending, Hacker News, Designer News, Product Hunt and DEV Community front pages. You can change the placement of the cards and display whatever platform you’d like to in different order.

Development tools

In this section you can find browser extensions, which helps you in the development process of building websites and web applications. These tools help you to develop pixel perfect user interfaces, audit and test websites, and more.

Web Developer

Web Developer is one of the most popular extensions for web development. This extension is a toolbar with various tools useful for web developers and web designers. The toolbar offered by this extension is divided into 10 separate tabs – Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize and Tools. Each of these categories includes some more options that allow you to do multiple things.

You can edit CSS or disable specific CSS. Forms section allows you to automate form elements tasks such as checking checkboxes, clearing form fields, removing form validations and more. Image section provides functionalities such as displaying image dimensions, path, alt attribute, finding broken images, etc. The extension has built-in tools for testing accessibility, displaying a ruler or color picker. You can outline specific elements such as headings, external links, framer and more. Additionally, you can validate HTML, CSS and resize the browser window.

Dimensions

As a freelance web developer, you are required to deliver pixel-perfect solutions. If you have ever used a tool for collaboration between developers and designers, you have probably came across tools such as Avocode or Zeplin. They allow you to inspect elements dimensions and measure distances between elements.

Web Developer extension is able to display Ruler and Line Guides, which are very helpful. However, if you need to inspect dimensions between elements, Dimensions extension is very helpful. It allows you to measure distances between elements on a webpage.

PerfectPixel

PerfectPixel allows putting a semi-transparent image overlay over the top of the developed web page and performs pixel-perfect comparison between them. If you use Avocode or Zeplin standalone application, you don’t need this browser extension because these tools provide this feature. However, if designs are available only in image exports, this extension is very helpful.

Technology Identifier

Sometimes when you come across an impressive website, you are wondering:

Which technologies have been used to make this website?

If you want to develop something similar to a specific website, you can use tools WhatRuns and Wappalzyer. These tools allow you to determine what web technologies are used on any website. You can find out what programming languages, database systems, CMS and plugins, analytics tools, JavaScript frameworks, CDN, caching system and more are being used for a specific website.

Broken Link Checker

Check My Links extension finds all the links on a given web page and highlights which ones are valid and which ones are broken. Identifying and correcting broken links is critical for any website and effective SEO. It allows you to export the list of broken links with one click and you can verify both internal and external links, and you have the option to check nofollow links.

Web Developer Checklist

Web Developer Checklist extension allows you to discover problem areas on your website before you deliver it to your client. It analyses and checks a given web page for any major violations of web development best practices in terms of SEO, usability, accessibility, and performance. The result is full of action points that web developers can use to enhance the source code.

Meta SEO Inspector

If you need to get a deeper analysis of SEO, Meta SEO Inspector allows you to inspect HTML meta tags, various microformats, canonical attribute, the no-follow links, etc. You can print the final report or export it into PDF.

Checkbot: SEO, Web Speed & Security Tester

Page Speed Analyzer and Lighthouse are popular web audit tools. Lighthouse is a built-in audit tool in Chrome DevTools.

What can you use if you want to audit the whole website instead of a single web?

Checkbot allows you to audit small websites (currently 250 URLs per crawl) for free. It runs tests based on 50+ best SEO and security practices based on recommendations from Google, Mozilla, and W3C. You can check SEO, performance and security issues such as broken links, redirects, duplicate content and more.

Checkbot is useful when you make changes that impact your whole website such as updating your page headers and footers, your code that generates page meta tags and your server redirect rules.

Lorem Ipsum Generator

Lorem Ipsum Generator provides an easy and quick way to create a default text as a placeholder. Lorem Ipsum Generator (Default Text) extension allows you to customize how many paragraphs and how many sentences per paragraph you want.

Cookies Manager

EditThisCookie is the most popular cookie manager extension for Chrome browser. It allows you to add, delete or search cookies. Additionally, you can also import cookies in JSON or .txt format.

VPN

TunnelBear is a VPN provider that provides 500MB bandwidth for free. Their Chrome extension hooks you up with their VPN and you can test website performance from different virtual servers from around the world. You can use this VPN as a standalone application, browser extension or mobile application.

Alternatively, if you just need to use a VPN for browsing, you can consider Opera browser, which has built-in VPN feature for free.

JavaScript Errors Notifier

When you develop single page applications, websites or web applications with a complex user interface, you need to work with a lot of libraries and JavaScript code. This extension notifies you about JavaScript errors by an icon in toolbar bar or notification popup.

User-Agent Switcher

When a browser makes a request to a website, it sends a HTTP Header called “User-Agent”. The User-Agent contains information about the web browser.

User-Agent Switcher is an extension that allows you to check out how your web page is rendered in various browsers and devices. Web developers are aware that in order to achieve perfection, their apps should run in every environment. This is a great extension that helps to accomplish that.

Automate Your Browser

As a web developer, you need to do a lot of testing too. iMacros for Chrome is an extension that streamlines the testing process by allowing you to record and save your actions — saving you the time you’d otherwise spend repeating the same actions over and over again. With the help of iMacros, you can easily fill out the web forms, create a webmail notifier, remember the password and much more.

Octotree

As a web developer, you are probably dealing with a lot of open-source code and Github repositories. Obtotree is a browser extension for all major browsers, which makes browsing GitHub easier and faster. It allows you to browse a Github repository in a tree view. Octotree free version allows you to file search, which requires a free account.

Enhanced GitHub

Enhanced Github is another extension for Github. This extension provides additional features on top of Github website. It displays repo size and size of each file, provides download link for each individual file and option to copy file contents to clipboard.

Web design tools

Web developers usually don’t need to design user interfaces, but clients require from freelance web developers to deliver the whole website, which includes designing. In this section, you can find tools, which can help you in the process of designing user interfaces.

Font identification

There are many browser extensions, which you can use to identify fonts on a web page. WhatFont is the most popular extension, which inspects web fonts by just hovering on them. However, Font Face Ninja extension provides more functionalities. It grabs fonts from images and it allows you to preview fonts by typing in your own words. You can download the font — both free and paid links are displayed. You can also ‘bookmark’ any fonts for later reference.

Color Picker

Color pickers enable you to get a color reading from any pixel on the browser on the fly. Then you can paste it in any other program in RGB HEX formats. The most popular color pickers are ColorZilla and ColorPick Eyedropper. A click on the element will copy the color of the selected element to the clipboard. It’s a great way to speed up the time it takes to discover, copy and paste a color.

Site Palette

If you come across a website with impressive color combinations, Site Palette extension allows you to extract the primary colors from the website and generates a palette. Site Palette integrates with other tools coolors.co and Google Art Palette.

SVG-grabber

SVG-grabber lets you preview, download and copy the code of all SVG icons and illustrations in a web page.

TinEye Reverse Image Search

TinEye is the first reverse image search engine on the web to rely on image identification technology, instead of using keywords, metadata or watermarks. TinEye makes it simple to quickly find the original source of almost any image. It creates a unique fingerprint for every image searched, then compares it to every other image in the database to find exact matches (not similar matches), including exact matches that have been edited, cropped, or resized.

45to75

Line length shouldn’t have more than 75 characters. 45to75 is a character counter for helping to optimize line length (measure) between 45 and 75 characters. This will ensure your text stays readable across the various situations in which it could be read. Highlight some text, right click, and view the character count right in the tooltip.

Conclusion

Google Chrome will stay the number one browser for web development, at least for a while. It provides a lot of extensions, which can enhance the workflow of every web professional.

Whether you are an experienced web developer or you don’t code at all, I hope you find useful Chrome extensions in this blog post.

The first section contains various no-coding tools, which can use every freelancer or an ordinary user. Development and web design sections contain tools, which are helpful in the process of designing and building web user interfaces.

If you are already using Chrome extensions, I would love to hear from you. Have you ever used any of the above 30 extensions to streamline your workflow? Did I miss your favorite chrome extension that has helped you as a freelance web developer?