My favorite Chrome extensions for web development

As a developer, I'm always looking for ways to make things easier so I can focus on bieng creative. I don't enjoy spending my time doing redundant tasks, or putting more effort into something than necessary -- whether that's using automation or tools to simplify my workflow, or reducing the strain on my eyes as I'm working.

Who'd have thought there'd be ways to improve my life as a developer using Chrome extensions? Here are some of my favorite, most useful Chrome extensions, in no particular order, that I use to make my life easier as a developer. Hopefully, you find them just as useful. Leave a comment with your favorite Chrome extensions.

Adblockers

Adblockers are critical for quality web development, I would argue. So many times have I had bugs reported to me that had to do with someone's adblocker arbitrarily blocking an image that had the word 'ad' in it. You never know when an adblocker will block some critical client-side code or resources.

uBlock is my adblocker of choice -- it's not necessary better or worse than a lot on the market, but it's the simplest to use, and is stricter than most out of the box. AdblockPlus is great as well. If I am running an automated test using something like Selenium, or testing my work in any capacity for that matter, I may choose to enable and disable the adblocker.

ModHeaders

This is one of my favorite plugins. It allows me to modify request and response headers, which are great for testing purposes. Need to test your GeoIP functionality? Update the X-Forwarded-For header. Want to test dynamic functionality that is based on the user's device or operating system? Pass in your own User-Agent string.

One handy thing you can do is pass in auth headers or tokens to test API requests / responses.

Github Stuff!

There are myriad tools for Github that I've found incredibly useful, and just make Github's website better (in my humble little ol' opinion).

I MEAN LOOK AT IT!

Github Dark Theme adds dark-mode theming to the overall layout.

OctoTree adds a pinnable filetree I can use to navigate my repositories like I would in an IDE.

EnhancedGithub does all kinds of things; it displays file sizes for each file in a repository, allows you to download files individually from the file browser or from the file itself, and copy a file's contents to the clipboard without viewing the file (except for markdown files).

OctoLinker allows me to click on references to files in my application; any import, include, or require statement I use in my code turns into a link on github, that links to that specific resource in my code.

All these tools combine make navigating and using Github easier on my eyes, and makes the context switch from my IDE to Github more seamless. I dig it.

Honey

No, I'm not sponsored - wish I was. That'd be dope. But the link above will at least give me some rewards if you use it! :)

Honey has legitimately saved me some serious dollars. I've saved hundreds on single purchases from Amazon and Kohls, and more with the amount of coupons I've used for ordering in food. I have a bad habit of spending money on figurines, and I've tried to tame that beast. But when I decide to feed that addiction, Honey becomes an invaluable tool to save money on those extra goodies I'd likely have spent a lot more on.

Vue.js DevTools / React Developer Tools / Augury

I work in React, Vue, and Angular, and have the dev tools for each. They are a must have if you are working with any of them. From testing, manipulating, and monitoring your application's state, digging into data passed to and from your components, etc., are things that would be rather laborious. While none of them are perfect, and can crash from time to time, they have become essential debugging and development tools in my workflow.

Google Analytics Debugger

In spite of the growth of adblockers being used in browsers to block it, Google Analytics is still often the tool of choice for web analytics.

As a developer, you may not be akin to getting to know Google Analytics reporting, but you may find yourself in situations in which you need to pass custom data to Google Analytics -- be it events, ecommerce tracking, goal tracking, etc.

While using GA's API is pretty simple, testing it isn't, as some data will be unavailable to you to see in the GA dashboard for up to 24 hours. The GA Debugger fixes that problem, and lets you see what any site sends to Google Analytics in your dev tool's console. In preserving your log, you can browse around your GA-enabled website and see your click events, any default data Google Analytics picks up out of the box, and any custom events or data you pass to it.

There you have it

These are my favorite chrome tools. Don't worry -- I know the links aren't there yet. I'm still updating this post, but I wanted to get the content up. You know. For SEO and stuff, or whatever. :)

Quick update

Back in June, an extension called "The Great Suspender" had been sold by its original creator to another company. After doing so, the new owners used the extension to push ads to users, sold its users' information to third parties, and generally participatede in malicious behavior. The plugin has since been removed from the Chrome webstore.