Chrome extensions for webmasters

In my daily work as a webmaster there are several tasks on the website that are recurrent. One of them is maintenance, to make sure that everything is in order, updated and working properly. The other is the development of landing pages that, periodically, come to meet the needs of my company.

I also dedicate some time to visit other websites that, due to their characteristics, allow me to learn new things that can be applied in the future. Some of them are from my competitors or even from my company's customers.

Furthermore, I also inform my bosses of things that I find interesting and that can be used in our marketing strategies.

I use a number of tools to help me in my work. Today I would like to talk about a specific set of these tools: my favorite Chrome extensions.

Chrome as a development browser

I started programming with Netscape Navigator, which I soon complemented with Microsoft Internet Explorer. Both were the two most widely used browsers in the fledgling world of the World Wide Web. Today they have disappeared and have been replaced by a plethora of new browsers. We now have Firefox, Opera, Brave, Edge, Safari and, of course, Chrome. Although the ecosystem of browsers has grown, most of them agree on certain standards, albeit with subtle differences, that allow developers not to have to make "custom suits" every time we create a web page.

As a developer I had to evolve and, as other browsers became popular, I was changing my development browser. In recent times I worked a lot with Firefox, and occasionally I still use it, but then I started to do it with Chrome, mostly because many tools related to the positioning of the websites I build or maintain, are from Google, as well as Chrome.

I will not go into the virtues or defects of this browser as a development tool since that is not the subject of this article, but I will refer to a feature, which is by no means exclusive to this browser, such as the ability to extend its functionality through extensions (called add-ons in other browsers). In the Chrome Web Store, the place to get these extensions, there are an estimated 180,000 extensions of all kinds published.

My favorite Chrome extensions

Every piece of code that we "plug" to any of our applications, slows down its use. Extensions are no exception and this is especially relevant in browsers, applications that given the enormity of functionalities they have "out of the box", are already heavy. For this reason, I tend to be very selective with the number of extensions I install.

To establish some kind of simple classification, I will organize the extensions in two categories: utilities, which are not directly related to my work as a webmaster but make my life easier and tools, which contribute directly to my work as a developer.

Utilities

Bitwarden: Although some of the tools I use I can access through my company's SSO, in most cases, my accesses are by credentials. This means remembering users and passwords for each of them (I don't use the same password for two websites). Therefore, I have to resort to a password manager to store my logins to different websites. I have experimented with several and Bitwarden seems to me to be one of the best even in its free version.

Awesome Screenshot: Many times I need to take screenshots to write projects or tutorials. Although all operating systems include some application to take screenshots, these are usually not very flexible. Awesome Screenshot extension allows me not only to make these static screenshots but also to record videos of what is happening on the screen and includes the possibility of including texts, arrows or boxes to illustrate the screenshot.

Wappalizer: This extension allows me to know the technologies behind a website. So I can determine if a website is made with WordPress, Prestashop, Shopify or Salesforce, as well as other technologies (analytics, building, ads, etc) that are present.

Tools

Web Developer: This extension is a classic for web developers. It first appeared in 2010 for Chrome, then jumped to Firefox and Opera. It is like a Swiss army knife that contains a lot of tools to work with HTML, CSS, JavaScript, images, forms or cookies on a web page, enabling and disabling options.

Window Resizer: All of us web developers usually work with large format and high resolution screens. However, the product of our work must be displayed correctly on different types of devices, with different screen sizes and various resolutions. This extension allows us to resize the browser to default sizes that represent those devices on which we want to display our web page.

WhatFont: If you need to know what fonts are used on a website, this is the right extension. It indicates the font family, size and weight, interline or color, among other data.

Colorzilla: This extension is similar to the previous one but for colors. From knowing the color of a certain area of a web page to determining the color palette used, it also offers some extra, such as a gradient generator.

Page Ruler: Who has not needed to measure how many pixels an object has on a web page. This extension allows us to know the height and width of each object, as well as its position with respect to the top left corner of the page (origin of coordinates of the web pages).

SVG Export: In many occasions I need to obtain a logo from a client or partner web site in SVG format (I am an obsessive of this format). This extension detects them and makes it easy for me to download them, but it also does it with images in JPG and PNG formats (I hope that soon it will also do it in WebP). The only thing you have to be careful here is with the rights of the images you download, regardless of their format.

As you will see there are not too many, although I usually have two or three more installed that are in testing period in case it is worth including them in my webmaster arsenal.