The above is a screen grab of my Chrome extensions. There are so many browser extensions and bookmarklets that can really help streamline your testing and help with productivity. In order, I have the following extensions shown above:
- Web Developer – This adds a toolbar button with a bunch of different web developer tools. I really like what you can do with the images, such as displaying all alt text, displaying dimensions, finding broken images, and outlining images with empty alt attributes. And that’s not even naming half of what just the image part of this tool can do. The resizing part is also really great for quickly resizing your screen into a particular dimension.
- What Font – Ever visited a website and loved the font but didn’t know what it was? This is the easiest tool for identifying fonts on a page. It will give you the font-family, size, color and line-height.
- Responsive Inspector – This is another great one for resizing to certain sizes. You can customize it or use the standard sizes. I don’t use this one quite as much because I’ve been trying not to rely on specific screen sizes when writing media queries and trying to make more of a fluid design. I may delete this one after writing this but it is a handy one if you want to see a specific screen size quick.
- Feedly Mini – If you use Feedly for reading blog posts this is a great way to really quickly add websites to your reading list. You can even share a page via Facebook, Twitter, etc. or tag or bookmark a page.
- Bit.ly – Really quickly create and/or share short links.
- One Tab – I think at any given time I have a minimum of 5 tabs open. Anything from something I want to read later to something else I’m referencing. When it gets to be too much one tab is great. You just click it and it converts everything into a clean, clickable list. You can also share the url so sometimes I’ll reopen tabs at home that I wasn’t able to get to at work.
- Colorzilla – This is another great tool, you can pick specific colors from the page and copy them, there is a page analyzer that will pull every color being used from the page to create a palette and a picked color history.
- Pocket – Pocket is a great tool for saving articles, videos, pretty much anything. This browser extension makes it that much easier!
- DuckDuckGo – DuckDuckGo is my favorite search engine. If you’re not familiar, they don’t track you! I have DDG set up as my default search engine in Chrome already but this little extension allows you to do a quick search even quicker.
- Edit this Cookie – This is a great cookie editor. You can do so much with it – delete, edit, remove, and block cookies, just to name a few!
- Dimensions – This is good for measuring screen dimensions. Just click on it when you’re on a site and it will bring you into the handy dimensions grid.
- Cache Killer – Automatically clears your cache before every page load. Great for testing.
- Evernote Web Clipper – This allows you to clip pages and save right into your Evernote account. I like to use Evernote for Girl Develop It Philly event planning notes so I can clip other events that I think would be fun to and save it right into that tag in my Evernote account.
- Color Contrast Analyzer – Helps to analyze text color contrast according to WCAG 2 contrast requirements. It’s great because you can analyze the whole page or just a portion of it.
- PageSpeed Insights – Now that this is available in dev tools I’m going to delete this one 🙂
- Readonomy – Readonomy is a great way to share reading lists with teams. With the Chrome extension I can easily click on an article I want to share with my team. You can make comments and get notifications when someone else shares something.
- Tag Assistant – This helps with troubleshooting different Google tag installations. I use this one at work to make sure all of our tags are correct on all of our various websites.
- Break Helper – This is a timer that goes off and reminds you to get up from your desk. We all know how bad sitting at a desk all day is for you and I’m sure we all know how easy it is to forget to get up and walk around. This handy timer gives you a little reminder. The default is the Pomodoro technique (25 minutes of work 5 minutes of break) but you can set it to whatever you’d like!
- Amazon Smile – I shop on Amazon. Way too much. But now that I now a small amount of my purchase is going towards supporting an awesome organization like Girl Develop It, I don’t feel so bad. This is just a quick shortcut to bring you to Amazon Smile. Sign up for it. Support an awesome org. There’s tons of tech groups on there!
- Toggl – Toggl is what I use for time tracking. It’s an awesome open source tool you can use on your own or within a team. I like to use it personally for freelance projects and we also use it within my work team. The chrome extension is great because not only will it remind you to track your time it will also allow you to track time in a ton of other web tools like Trello, Google Drive, Basecamp. Check out the full list here.
- Wave – Wave is a great way to quickly check your site for accessibility issues. It’s the bare minimum, but still a great way to get started! Just click on the extension in your page and immediately see issues like headers out of order, links that don’t make sense, images without alt tags and other issues you might have missed that could be excluding some users from easily using your site?
- No Coffee – No coffee is great way to view your site the way someone who is visually impaired might be looking at it. From the developer: “Vision problems are more pervasive than most of us realize. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties. The number in the U.S. is expected to double by 2020, due to the aging of the baby boomer generation.” Let’s start thinking about all of our users and designing sites everyone can use.
So there’s my pretty lengthy list of browser extensions I use. What am I missing? What extensions help with your productivity?