If you are a web designer, developer, or tester, you probably have a bunch of tools you regularly use. But did you know that Chrome has a lot of useful extensions that can make your workflow quicker and easier?
Chrome Extensions for All Online Remote Workers
Before I get into Chrome extensions specifically for designers, developers, and testers, here are some useful for anyone working online remotely.
SimpleExtManager
🏆 Best for managing all your Chrome extensions.
If you are going to be installing a large number of Chrome extensions, things could get messy and disorganized. SimpleExtManager comes to the rescue by enabling you to keep your Chrome extensions organized. You can sort your extensions into groups and easily enable or disable them with a mouse click.
Session Buddy
🏆 Best for managing browser tabs and bookmarks.
We’ve all been there – you get deep into some complicated work and end up with 30 different browser tabs open. You don’t want to close any of the tabs just in case you need them later.
This is where Session Buddy comes in handy. It enables you to save open tabs as collections and then easily re-open them all later, as well as search through your tabs to find something specific.
FoxClocks
🏆 Best for keeping track of time zones around the world.
If you are doing any type of online project work, you will be working with people in different locations worldwide. FoxClocks enables you to keep track of time zones, so you know when the people you’re working with will likely be online.
Checker Plus for Google Calendar
🏆 Best for keeping track of meetings and appointments.
Working online remotely often means having virtual meetings at various times of the day, and Google Calendar is a great way to stay organized. But Checker Plus takes it to the next level by enabling you to manage all your appointments, notifications, and reminders without visiting the Google Calendar page.
RightInbox
🏆 Best for using Gmail more efficiently.
If you are working remotely with various clients or team members, you probably find yourself in your email inbox throughout the day. RightInbox can streamline your email workflow in the following ways:
- Schedule emails to send later – bulk-write all your emails for the day in one go.
- Set up recurring emails, so you don’t have to send the same email each time manually.
- Track email opens and create follow-up emails to send depending on whether the last email was opened or not.
- Create email templates for the types of emails your routinely write.
- Add private notes to your emails for future reference.
Chrome Extensions for Web Designers
Now we come onto the Chrome extensions that are specifically useful for designers. These could save you a ton of time during your design workflow.
Yet Another Lorem Ipsum Generator
🏆 Best for quickly generating dummy text.
Lorem Ipsum is the meaningless text that you can use to fill out any design that will feature text. It has a more-or-less normal distribution of letters, filling out the space more naturally than repeatedly copy-pasting “Here is some text. Here is some text.”
The Lorem Ipsum Generator Chrome extension lets you quickly and easily insert Lorem Ipsum text into any page you are working on.
Fonts Ninja
🏆 Best for identifying the fonts on any webpage.
Let’s say you’re designing a new website and come across another one with a font that you think would be great for your new design. Fonts Ninja enables you to easily find the font’s name, size, line spacing, letter spacing, and color.
VisBug
🏆 Best for experimenting with different web page designs.
VisBug is a handy tool for quickly experimenting with the design of an existing webpage to see how it will look. You can move elements around the page, change text, change colors, resize things, and more. It’s handy to see how specific changes will look without changing the existing webpage for other visitors.
Page Ruler
🏆 Best for measuring dimensions on a web page.
Page Ruler is your friend if you need to know the exact dimensions of the elements on a web page. Once you have enabled the extension, it displays a grid on the page, and when you click and drag between elements, it shows a yellow rectangle along with the area’s measurements.
CSS Peeper
🏆 Best for extracting CSS and building style guides.
If you are a designer who wants to minimize the time you spend looking at code, the CSS Peeper Chrome extension is for you. It enables you to view the CSS page style information without having to dig into the code. That way, you spend more time on design and less time looking at code.
ColorZilla
🏆 Best for copying the colors from any website.
If you’ve ever wanted to quickly copy a color from another website, ColorZilla is for you. You can use the eyedropper to get the exact color of any pixel, or you can use the advanced color picker, which works similarly to the one in Photoshop. It can also analyze the entire color palette of a web page.
Chrome Extensions for Developers
A developer’s workflow can be intense and complicated, but these tools can make it smoother.
PerfectPixel
🏆 Best for matching a web page to a design.
If a designer has given you a web page mockup, your job as a developer is to code that web page to match the design. With the PerfectPixel Chrome extension, you can overlay the image of the design over the top of your in-progress web page to see how well it matches up.
Web Developer
🏆 Adds various web developer tools to your browser.
The idea for the Web Developer Chrome extension adds various web developer tools to your browser, such as:
- Clear session cookies.
- Display element information.
- Display image file sizes.
- Display topographic information.
- Edit CSS.
Animo
🏆 Best for customizing any website with your CSS code.
If you want to experiment with CSS code on a website without altering the code of the live site, the Animo Chrome extension is what you need. You can quickly add your own private custom CSS code to any web page to see what it will look like. You can then save your CSS to the cloud and have it apply your code every time you visit the web page. This means you can tinker around with the CSS code for a website over the course of several days, all without altering the code of the live site.
Wappalyzer
🏆 Best for identifying the web technologies used on any website.
Have you ever come across a website that impresses you, and you want to know what technologies run on that site? Well, now you can, thanks to the Wappalyzer Chrome extension. Use it to find out what CMS the site uses, as well as the eCommerce platform, JavaScript libraries, and more.
Octotree
🏆 Best for a better code review experience on GitHub.
If you are a developer who spends a lot of time exploring and reviewing code on GitHub, you might want to consider the Octotree Chrome extension. It is used by more than 400,000 developers, and provides a fast, IDE-like code tree, enables you to do quick file searches, and has multi-tab support and omni bookmarking.
GoFullPage
🏆 Best for capturing a screenshot of an entire web page.
If you are developing a website, it can be helpful to get an overview of an entire web page – not just the section you can see in the browser window, but the whole thing, from top to bottom. The GoFullPage Chrome extension enables you to take a screenshot of exactly that.
Check My Links
🏆 Best for checking your website for broken links.
Broken links can be a nightmare. If visitors click on your website and come across a link that doesn’t work, that’s not a good user experience. Thankfully, the Check My Links Chrome extension can find all broken links in a single click, saving you a ton of time in finding them.
JSON Formatter
🏆 Best for making JSON easy to read.
If you are a developer using JSON (JavaScript Object Notation), consider installing the JSON Formatter Chrome extension. It makes viewing and validating JSON documents much quicker and easier. Features include:
- Collapsible trees with indent guides.
- Syntax highlighting.
- Buttons for toggling between raw and parsed JSON.
- Clickable URLs.
Daily.dev
🏆 Best for keeping up to date with the latest developer news.
The daily.dev Chrome extension is a news aggregator for software developers. It receives news from over 400 sources, and you can personalize it to suit your particular development interests. You don’t even need to sign up. You just install the Chrome extension and then set your preferences.
Hiver
🏆 Best for providing efficient customer support via Gmail.
If you are a developer using Gmail to communicate with clients, the Hiver Chrome extension makes it much easier. For example, you can:
- Assign emails to your team.
- Add teammate to emails with @mentions.
- Get alerted when another team member responds to a customer (to prevent you from responding to the same query).
- Track customer service metrics and identify where you can make improvements.
Chrome Extensions for Testers
It’s essential to test new websites to ensure they function as expected. But some useful Chrome extensions can make your workflow easier.
Window Resizer
🏆 Best for testing websites on different screen resolutions.
When you are testing a website, you need to ensure it displays correctly on various screen sizes, not just the one you are using. The Window Resizer Chrome extension lets you easily switch to different heights and widths to see how they look.
Fake Filler
🏆 Best for filling in forms with fake details.
If you are repeatedly testing web pages featuring forms, you will be inputting a lot of data. You can speed up that process by using the Fake Filler Chrome extension. It automatically fills in all fields of a form with fake information, saving you a ton of time.
Clear Cache
🏆 Best for quickly clearing your browser cache.
When testing websites, it’s useful to be able to clear the cache so you can see what the site looks like when a new visitor arrives on it. The Clear Cache Chrome extension lets you quickly clear your browser cache with the single click of a button.
Lightshot
🏆 Best for taking quick screenshots of web pages.
Let’s say you are testing a website, and something unexpected happens. It would be good to be able to take a screenshot quickly, wouldn’t it? Well, with the Lightshot Chrome extension, you can do precisely that.
FAQ
Click the three dots in the top-right of Chrome, then select More tools, followed by Extensions.
Click the jigsaw icon in the top-right of Chrome. You can then select the pin icon next to any extensions you want to be displayed in the toolbar.
The best Chrome extensions for developers are PerfectPixel, Web Developer, ColorZilla, Animo, Wappalyzer, Octotree, GoFullPage, Check My Links, JSON Formatter, Daily.dev, and Hiver.
Summary
Working as a designer, developer, or tester can be a busy and complicated job. But with these Chrome extensions, your life can be made just a bit easier. Here is a recap to summarize.
Chrome extensions for all online remote workers:
- SimpleExtManager – for managing all your Chrome extensions.
- Session Buddy – for managing browser tab and bookmarks.
- FoxClocks – for keeping track of time zones around the world.
- Checker Plus – for keeping track of meetings and appointments.
- Right Inbox – for using Gmail more efficiently.
Chrome extensions for designers:
- Lorem Ipsum Generator – for quickly generating dummy text.
- Fonts Ninja – for identifying the fonts on any webpage.
- VisBug – for experimenting with different web page designs.
- Page Ruler – for measuring dimensions on a web page.
- CSS Peeper – for extracting CSS and building style guides.
- ColorZilla – for copying the colors from any website.
Chrome extensions for developers:
- PerfectPixel – for matching a web page to a design.
- Web Developer – adds various web developer tools to your browser.
- Animo – for customizing any website with your own CSS code.
- Wappalyzer – for identifying the web technologies used on any website.
- Octotree – for a better code review experience on GitHub.
- GoFullPage – for capturing a screenshot of an entire web page.
- Check My Links – for checking your website for broken links.
- JSON Formatter – for making JSON easy to read.
- Daily.dev – to keep up with the latest developer news.
- Hiver – for providing efficient customer support via Gmail.
Chrome extensions for testers:
- Window Resizer – for testing websites on different screen resolutions.
- Fake Filler – for filling in forms with fake details.
- Clear Cache – for quickly clearing your browser cache.
- Lightshot – for taking quick screenshots of web pages.
