Every developer (front- or back-end) has their own set of tricks and tips. And those tricks sometimes include browser extensions. There are a few that we use consistently, some for development, but others are just for convenience. Below are some of our favorites.
LastPass (All Major Browsers)
Who wants to remember a bazillion passwords for everything? With LastPass
, all you really need to remember is just one — the one to login to LastPass! I couldn’t tell you how many passwords I have, the different iterations, capitalizations, or ones with numbers, special characters and what-have-you. Between the logins for content management systems, marketing automation platforms, and training, forgetting them is like breathing! With the Last Pass extension installed, it will automatically detect the fields on a login and fill them in. Voilà, you're signed in!
Full Page Screen Capture (Chrome)
Sometimes you need to get a full screenshot of a webpage, maybe for a client or for the company portfolio. Back in the old days, this was a very tedious task, taking multiple screenshots, dropping them into Photoshop and splicing them together. Your 1-hour task now turned into a 4-hour task. With Full Page Screen Capture
, the entire page is scrolled, taking screen grabs, then stitching it together into a PNG or JPG image.
User Agent Spoofer (Chrome)
When developing websites, sometimes you need to mimic another web browser (or one on a different device) to see how a page is rendered or how certain functionalities work. So, if you need to get Chrome to pretend to be Internet Explorer, or to be an iPhone, User Agent Spoofer
is the way to go. This is especially handy if you have a script that looks at the browser's User Agent to render the page you're on. For example: there may be a styling feature that isn’t available in Internet Explorer and you have a script that creates a workaround for that. While testing the exact browser is going to occur in the final QA process, it's just a bit more convenient to keep rolling along in your current, preferred browser.
Measure It (Firefox)
As a Front-end Developer, there are several instances where I need to ensure my work is consistent with the given design. Sometimes things get complex and you need to make adjustments. Also, from time to time, that design may not be from a Photoshop file, it may be in reference to another webpage independently created. One way or another, pixel-perfect development gets tough, so you need a pixel measuring tool. Measure It
is a really good way to validate that your styling rules are doing as intended.
What's the color on that button? With Color Picker
, you can quickly grab a color hex code off of an element or an image. While looking in the browser’s inspector can usually do the same thing, this is just one less step you need to take. Where it really comes in handy is when you need to grab a color value off an image (rare, but it happens).
The web is moving towards accessibility, which is a good thing because everyone should have the same access to content on the internet. With WAVE
, or the web accessibility evaluation tool, it is easy to resolve accessibility issues. Depending on the organization or company, not having a properly accessible site can come with legal ramifications. When this extension is on, it evaluates errors, alerts, color contrast and much more. This extension really takes the guesswork out of accessibility.
This is really just the tip of the extension iceberg. Were there any extensions we missed? Sound off in the comments below!