Top 10 Chrome Extensions for Web Developers

About a week ago, I wrote about how I use Chrome extensions to increase productivity. Likewise, a number of Chrome extensions have made it into my workflow as a web developer. Here are my top 10 Chrome Extensions for Web Developers:

#1 – BuiltWith Technology Profiler

I can hear it already: you can just look at the source code. URL paths reveal the Content Management System, src attributes on script tags show active frameworks, and so on. While true, this extension is quicker, more informative, and neatly categorized into sections (e.g. CDNs, JS frameworks, analytics and tracking tools, etc.)

#2 – Siteimprove Accessibility Checker

We in the web development community (present company not excluded) suck at accessibility. I’d call it an afterthought – but really, it’s often more of a non-thought. There are a few reasons for this. For one, an inaccessible site will work without a hitch for most people, even if it’s totally inaccessible to those with disabilities. Second, web developers are often lazy. Third, there is a misconception that good SEO practices are enough to make a site accessible. While this extension wont reveal all accessibility problems, it does a pretty good job uncovering problems with tabbing sequence, color contrast, skipped headings, aria-labels, and much, much more.

#3 – Check My Links

I used this extension a lot more before switching over to Screaming Frog SEO Spider, which checks links for the entire site. However, for single page spot checks, this one works well.

#4 – Email Extractor

I used to do a bunch of scraping projects with cURL and regex to extract emails from a domain. This is still a great skill to have if you are building targeted contact lists, but email extractor simplifies this a lot

#5 – Vue.js devtools

Of the big three frameworks (Vue.js, React, and Angular), Vue.js is far and away my favorite. The learning curve is gentle and the conventions aren’t overly opinionated (I’m looking at you, Angular). The fifth version of this extension was released earlier this year, and you can check out this article for some of the latest features.

#6 – Chrome Regex Search

Regex was one of those things I learned late, in part because a more senior web developer I trust told me they were really difficult, and because frankly, they just look horrible. Want to extract an email? Here you go! (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]). Still unclear? Here is a railroad diagram to make your life even worse:

A complex railroad diagram from emailregex.com to extract emails with regular expressions
Brought to you by https://emailregex.com/

But in all seriousness, once you get the hang of regular expressions, you won’t be able to stop using them. This plugin has a lot of nice features that aren’t available when executing from the console.

#7 – Google Font Previewer for Chrome

I’m a total font nerd. Most people who have spent about an hour with me know this. If you want to quickly experiment with fonts on a webpage, this is a good way to do it.

#8 – Width and height display

You can only see the width of the browser if dev tools are open and you are actively resizing the browser. This makes sense, but sometimes I want the width size to stay there, especially if I have to go back and reference without having to open dev tools and resizing the browser.

#9 – LiveReload

(Note – I had to pay for this one, but worth it). Just like we don’t want to be FTP Commandos (heard this first in a Chris Coyier talk on A modern web designers workflow), we also don’t want to be Refresh Commandos. So when developing locally, every time you hit save, the page refreshes automatically. Doesn’t seem like a lot, but in the long run, your cmd/ctrl + R muscles will thank you.

#10 – Checkbot: SEO, Web Speed & Security Tester

This gives you a ton of information on SEO, Site Speed and Security. Some of it I don’t use, because it is simply integrating another service like PageView Insights. Like I mentioned earlier, I use other tools for SEO specifically, but the way information is presented here is really organized.