Extenstions for Web Developers

Extenstions for Web Developers

This BlogPost was written by Andre Speek. Click here for other BlogPosts.

As a web developer I mainly use Google Chrome as my default browser. One reason for that is that I have hooked it up to my Google Account so my favorite extensions are always available when I log in.

So which extensions are so essential to me that I have a hard time when I don't have them available? Well, here is a list of the ones I use on a daily basis.

Awesome Screenshot



With this one you can make screenshots of your webpage. I can already hear you think "you can do that with print screen as well". True, but this one certainly has some advantages, otherwise I would not use it.

Just the page

First advantage is that it only takes a screenshot of the page, not the whole browser. Often I have a number of Tabs open and I don't want to share which ones. With print screen I would have to close them all, or remember to drag the Tab I want to capture to a new Window.

Capture the whole page

Sometimes the whole page doesn't fit in the view port and you need to scroll down. Good luck capturing that with print screen!

Capture with a delay

Sometimes I need to show a hover effect, or open a drop down list. In those cases, the delayed capture is very useful. It allows you a few seconds to show what you want to show before the actual screenshot is taken.

Quick Editing

This one also has some handy features to crop the screenshot. Or add some text, arrows or boxes to highlight what you want to stand out. And with the blur tool it is easy to hide sensitive information. Hey, it is not Photoshop but it will suffice in 99% of the cases.

Sounds good? You can install it here: Awesome Screenshot

ColorZilla



Often times when we build an application, we copy the colors from the customer's website. That's where ColorZilla comes in. With the eye-dropper tool you can easily click and copy any color from a webpage. Not just the HEX value, but also the RGB values as well. And with the build-in Analyzer, you can quickly grab all the colors in one go.

Sounds good? You can install it here: ColorZilla

JavaScript Errors Notifier

Since Javascript is a client-side language (it runs in the browser of a visitor), it is hard to make sure that is 100% error-free. Some errors might even go by unnoticed since they are not causing any problems when compiling the server-side code.

Yeah, you could have a look at the console in the Dev Tools of your Browser. But it would be even better if you would get a pop-up when a Javascript error occurs.



This extension does that, and more. It can show you a hard to miss pop-up, or it can give you a subtle notification in your toolbar. You can easily disable or enable it too. Which is very handy because, as you will notice with this one, there a lot of websites with buggy Javascript on it. Now you don't want to debug the whole internet, do you?

Sounds good? You can install it here: JavaScript Errors Notifier

Office Editing

When most of the things you do is in a Browser, you can work on any computer you like. Well, until you need to open a PDF or worse, an Office File like a Word Document or an Excel Spreadsheet.

THat's where this extension comes in. With it, your Browser can open most Office related files. You can even edit them directly in the Browser, though I must confess I do not do that often. Just being able to open them is in most cases more than enough.



With some of the advanced styling in Word, it might not be 100% perfect. Same with a Powerpoint with lot's of custom animations or an Excel Spreadsheet with complex macros. But hey, all you need is your Browser to view these files. In most cases, that is more than enough and you will be very happy with this one installed.

Sounds good? You can install it here: Office Editing

Window Resizer

You have a large screen monitor with a high resolution? Well, good for you! But not every visitor is that lucky. Luckily this extension makes it easy to resize your Browser from your large screen to an average laptop or an iPad.



Sure, you can also use the Dev Tools of your Browser and pick the Mobile preview. And then resize to any size you want. But this one is so much easier since it is only a click away. I also use this one to make sure my Browser is in a 16:9 format so when I make a screencast video, it will fit perfectly on Youtube.

Sounds good? You can install it here: Window Resizer

Lorem Ipsum Generator

This one is helpful when testing forms in your application. It can generate text in the form field that has focus.



Just pick whatever you want. Just a short title? Some short paragraphs? Or maybe more and longer paragraphs? The current date or a test email address? This one has it all and will save you a lot of typing!

Sounds good? You can install it here: Lorem Ipsum Generator

That's it for now!

With modern Browsers like Google Chrome, Microsoft Edge and especially Mozilla Firefox (the best Grid Inspector!) you already have some great Dev Tools to troubleshoot your application. But these extensions really turn your Browser in a Development Poer House.

When you run a recent (Chromium) version of Microsoft Edge, most of these extensions will work there as well. Only the Lorem Ipsum Generator is the exception to the rule and will not do what it should do.

So which one of these do you like best? Do you know another extension that I should try? Please let me know by leaving a reply!



Do you want to comment on this post? Leave a response here and I will get in touch with you!

You can leave a comment or send a question to andre@andrespeek.com. Let me know if you got inspired and stay safe and healthy always!




An error has occurred. This application may no longer respond until reloaded. Reload 🗙