Essential Chrome Extensions for Web Design and Development

Years ago, the quintessential browser for web developers was Firefox. This browser had a series of tools and extensions thanks to which it was possible to design and debug webs efficiently and easily. But the success of Google’s browser ended up making developers prefer to create their pages over the most used browser. And, therefore, not only do we have a collection of exceptional tools in it, but we can also find a large collection of extensions that will help us program websites more precisely and efficiently.

The Chrome Developer Console

Google Chrome has its own developer tools built into the browser. These tools are what we know as “development console” and we can launch it at any time by pressing the F12 key on our keyboard. Also from the Options> More tools> Developer tools section .

As we can see, this console for developers offers us a series of tools that can be useful when testing and debugging any website, whether it is ours or published on the network. We can find 9 tools, separated in tabs, within this section:

• Console – A console that automatically detects errors on the web so that we can quickly fix them.
• Elements : shows the HTML and CSS of the page, and allows us to modify it on the fly.
• Sources : shows us a table with all the resources that have been loaded on the page.
• Network : a tab from which we will see all the connections that the page makes to the server, all the resources it downloads and how long it takes to load each one.
• Performance – A performance test for the web.
• Memory : allows you to dump memory for analysis.
• Application : allows us to see all the files created by the web locally on our PC.
• Security : allows us to audit the security of the web page.
• Lighthouse – Used to identify and fix performance, accessibility, and user experience issues.

It is one of the most complete developer consoles that we can find. But also difficult to master, since, since the data is raw, we will have to dig deeper to make changes and basic tests. And, therefore, there are extensions.

Extensions to facilitate web design

Although with Chrome’s developer tools we can do almost everything, there are certain tasks that are complicated, and take us longer than they should. Therefore, if we want to simplify this task, we can resort to the following extensions. All of them, of course, totally free.

Window Resizer: test the web on different screen sizes

When we make a web page, it is very important that it is adapted to all types of screens and resolutions. Regardless of whether we access it through a smartphone, a tablet, an ultra-wide screen or a small laptop, all the elements must be adjusted correctly. As most likely we do not have so many screens at hand, then the best we can do is resort to the Window Resizer extension.

This extension allows us to easily resize the browser window to simulate different resolutions, both vertical and horizontal. We can choose the resolutions that come by default, or create our own. We can even change it using simple keyboard shortcuts.

Wappalyzer: know in depth the technologies of any website

Websites are no longer written only in HTML and CSS. Nowadays the pages have other languages (such as JavaScript or PHP) that allow us to create dynamic websites with all kinds of content. In addition, they also usually have a CMS and a series of third-party scripts and APIs that help us to shape it.

If we have programming knowledge we can easily find out all the information by analyzing the headers. But if we don’t want to complicate it, we can do it with one click thanks to Wappalyzer . This extension allows us to know the frameworks that a website uses, the CMS and even the server it runs on.

Library Sniffer: The Simple Alternative to Wappalyzer

Library Sniffer is an extension very similar to the previous one, so there is not much of it to highlight. Thanks to it, we will be able to easily know the technology that a web page uses, but we will do it in a much more disguised way: from the address bar itself. To the right of the URL we can see an icon that will indicate which is the CMS used, and also the frameworks and third-party services included.

What Font: Do you like a font? find out what it is

One of the style marks of each website are the fonts, the typeface. The sources. A web page can let the browser use the default font or, if you want a specific font type, you can specify it in the code. If we analyze the code of a website we can see if it has a specified source or not. But, if we do not want to complicate ourselves, the easiest thing is to install What Font , an extension that will take care of it automatically.

Web Developer: an all-in-one toolbar for web design

Often times, a web developer needs to have access to all kinds of functions and tools in order to, for example, enable or disable scripts, or show or hide all photos. Thanks to Web Developer we will be able to add a development bar to the top of any website.

From this bar we will be able to make on-the-fly modifications to the page’s HTML and CSS code. For example, we can change the size of the photos, the resolution of the screen and even deactivate elements and services, such as JavaScript, notifications and even cookies. Essential to check how the page behaves in all kinds of circumstances.

Code Cola, change the CSS “on the fly”

Big, small, red, black, white, centered, aligned… how do the letters and other elements of a website look better? We can always use the Chrome developer tools to test Thanks to Code Cola we will be able to see “on the fly”, in real time, the style of any element on a page.

This extension allows us to change, among other things, the font, color, style and even the orientation and size of both the text and any element that has been loaded on the web. And all from a very simple menu thanks to which we will not have to modify any code in the editor.

Web Developer Checklist: analyze your website to follow good practices

Creating a website is quite a long and complicated job, and it is easy to make a mistake in the process. Even if we check several times that everything is fine, something may be overlooked. Thanks to the Web Developer Checklist we will be able to add a simple checklist to our browser, thanks to which we can make sure that each and every one of the important points of the browser are met.

We will see from basic practices, such as checking links to optimization and SEO tasks for Google. We can mark all the tasks that we complete one by one and thus we will not miss anything.

Check My Links: links down? fix it

Google doesn’t like websites with dropped links. And it is one of the most common positioning penalties. If our website has many links, and we have a CMS, we can use it to check everything and find out which ones work or which ones are down. But if we don’t work with a CMS, things get very complicated.

Thanks to the Check My Links extension we will be able to see, at a glance, which links are down or have stopped working. Thus, we can edit the page to correct them, or better, delete them, avoiding the corresponding sanction by Google.