Essential Chrome extensions for web design and development

Years in the past, the browser par excellence of the web builders it was firefox. This browser had a collection of instruments and extensions due to which it was doable to design and debug web sites effectively and simply. But the success of Google’s browser ended up making builders favor to create their pages over probably the most used browser. And, subsequently, not solely do we now have a group of outstanding instruments in it, however we are able to additionally discover a big assortment of extensions that can assist us program web sites extra exactly and effectively.

The Chrome Developer Console

Google Chrome has its personal developer instruments constructed into the browser. These instruments are what we all know because the “development console” and we are able to launch them at any time by urgent the F12 key on our keyboard. Also from the Options> More instruments> Developer instruments.

Chrome developer console

As we are able to see, this console for builders provides us a collection of instruments that may be helpful when testing and debugging any web site, whether or not or not it’s ours or revealed on the web. We can discover 9 instruments, separated in tabs, inside this part:

  • Console– A console that robotically detects errors on the web in order that we are able to shortly repair them.
  • Elements: exhibits the HTML and CSS of the web page, and permits us to change it on the fly.
  • Sources: exhibits us a desk with all of the assets which were loaded on the web page.
  • Network: a tab from which we are going to see all of the connections that the web page makes to the server, all of the assets that it downloads and how lengthy it takes to load every one in all them.
  • Performance– A efficiency take a look at for the web.
  • Memory: Dump reminiscence for evaluation.
  • Application: permits us to see all of the recordsdata created by the web regionally on our PC.
  • Security: permits us to audit the safety of the web site.
  • Lighthouse– Used to determine and repair efficiency, accessibility, and person expertise points.

It is among the most full developer consoles that we are able to discover. But additionally tough to grasp, since, for the reason that knowledge is uncooked, we must dig deeper to make adjustments and fundamental assessments. And, subsequently, there are extensions.

Extensions to facilitate web design

Although with Chrome’s developer instruments we are able to do nearly every thing, there are specific duties which might be difficult, and take us longer than they need to. Therefore, if we wish to simplify this activity, we are able to resort to the next extensions. All of them, in fact, completely free.

Window Resizer: take a look at the web on completely different display screen sizes

When we make a web web page, it is rather essential that it’s tailored to all forms of screens and resolutions. Regardless of whether or not we entry it via a smartphone, a pill, an ultra-wide display screen or a small laptop computer, all the weather should be adjusted appropriately. As the most secure factor is that we shouldn’t have so many screens at hand, then the very best factor we are able to do is resort to the extension Window Resizer.

This extension permits us to simply resize the browser window to simulate completely different resolutions, each vertical and horizontal. We can select the resolutions that come by default, or create our personal. We may even change it utilizing easy keyboard shortcuts.

Window Resizer
Window Resizer

Wappalyzer: know in depth the applied sciences of any web site

Websites are now not written solely in HTML and CSS. Nowadays the pages produce other languages ​​(corresponding to JavaScript or PHP) that enable us to create dynamic web sites with all types of content material. In addition, additionally they often have a CMS and a collection of third-party scripts and APIs that assist us to form it.

If we now have programming data we are able to simply discover out all the data by analyzing the headers. But if we do not wish to complicate issues, we are able to do it with a click on due to Wappalyzer. This extension permits us to know the frameworks {that a} web site makes use of, the CMS and even the server it runs on.

Wappalyzer
Wappalyzer

Library Sniffer: The Simple Alternative to Wappalyzer

Library Sniffer It is an extension similar to the earlier one, so it’s not mandatory to focus on a lot of it both. Thanks to it, we will simply know the expertise {that a} web web page makes use of, however we are going to do it in a way more disguised manner: from the tackle bar itself. To the proper of the URL we are able to see an icon that can point out which is the CMS used, and additionally the frameworks and third-party companies included.

Library Sniffer
Library Sniffer

What Font: Do you want a font? discover out what it’s

One of the type marks of every web site are the fonts, the typeface. The sources. A web web page can let the browser use the default font or, in order for you a particular font kind, you possibly can specify it within the code. If we analyze the code of a web site we are able to see if it has a specified supply or not. But, if we don’t wish to complicate ourselves, the simplest factor is to put in What font, an extension that can care for it robotically.

WhatFont
WhatFont

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

Often instances, a web developer must have entry to all types of capabilities and instruments with a view to, for instance, allow or disable scripts, or present or cover all pictures. Thanks to Web Developer we will add a development bar on the prime of any web site.

From this bar we will make on-the-fly modifications to the web page’s HTML and CSS code. For instance, we are able to change the scale of the pictures, the decision of the display screen and even deactivate components and companies, corresponding to JavaScript, notifications and even cookies. Essential to test how the web page behaves in all types of circumstances.

Web Developer
Web Developer

Code Cola, change the CSS “on the fly”

Big, small, pink, black, white, centered, aligned… how do the letters and different components of a web site look higher? We can at all times flip to Chrome developer instruments to check Thanks to Code Cola we will see it “on the fly”, in actual time, the type of any ingredient on a web page.

This extension permits us to vary, amongst different issues, the font, the colour, the type and even the orientation and dimension of each the textual content and any ingredient that has been loaded on the web. And all from a quite simple menu due to which we won’t have to change any code within the editor.

Code Cola
Code Cola

Web Developer Checklist: analyze your web site to comply with good practices

Creating a web site is sort of a protracted and difficult job, and it’s simple to make a mistake within the course of. Even if we test a number of instances that every thing is okay, one thing could also be neglected. Thanks to Web Developer Checklist we will add a easy guidelines to our browser due to which we are able to be sure that every and each one of many essential factors of the browser are met.

We will see from fundamental practices, corresponding to checking hyperlinks to optimization and search engine marketing duties for Google. We can mark all of the duties that we full one after the other and thus we won’t miss something.

Web Developer Checklist
Web Developer Checklist

Check My Links: hyperlinks down? repair it

Google would not like web sites with dropped hyperlinks. And it is among the most typical positioning penalties. If our web site has many hyperlinks, and we now have a CMS, we are able to use it to test every thing and discover out which of them work or which of them are down. But if we do not work with a CMS, issues get very difficult.

Thanks to the extension Check My Links we will see, at a look, that are the hyperlinks which might be down or have stopped working. Thus, we are able to edit the web page to right them, or higher, delete them, avoiding the corresponding sanction by Google.

Check My Links
Check My Links