Good to Have: Chrome Extensions for Web Developers

Browsers have been evolving over the past years, and by now, there are plenty of tools for developers, allowing you to test your web projects in-depth, foremost regarding HTML, CSS, and JavaScript. This way, both JavaScript errors, as well as wrong CSS labels are recognized. However, the developer tools can't do everything (yet). Thus, there are a few valuable Chrome extensions to facilitate work for you.

Recognize Fonts With "WhatFont."

As a web designer and developer, you hang around on other websites now and then to get inspired. If for example, you found a font on a website that you'd like to use yourself, the extension "WhatFont" can help you.

Instead of searching the font name in the stylesheets, you can just hover over the respective text with the mouse when using "WhatFont". A small tooltip tells you the name of the used font. Via click on the text, additional information is given out, like font size and color.

Picking Up Colors Using "Eye Dropper."

Colors can be recognized in a similar way to fonts. To get the exact color from a website, you need to copy it from the stylesheet. If you want to grab a color from a picture, all you can do is take a screenshot to copy it into your image editor.

"Eye Dropper" makes all of that redundant. The extension provides a pipette that allows you to pick up a color from a website. While doing that, "Eye Dropper" doesn't restrict itself to elements that have had a color assigned to them via CSS. You are also able to get a color value from an image.

The color is given out as hexadecimal, RGB, and HSL value, including proper CSS labeling.

Deactivating Cookies With "Disable Cookies."

Deactivating JavaScript or turning off the cache for a website - all of this is uncomplicated thanks to the Chrome developer tools. Only the fast activation and deactivation of cookies is not possible in Chrome directly.

For that, you usually need to dive into the settings. The detour is rather complicated just to test how a website reacts to deactivated cookies.

The extension "Disable Cookies" now allows you to easily enable and disable cookies for a website via a button in the toolbar.

Measuring Distances and Sizes Using "Page Ruler" and "Dimensions."

Are all elements on your website placed correctly? Are all the distances and sizes right? The following extensions help you measure your site.

The "Page Ruler" can be used to place a rectangle on a website either manually, or by entering numeric values. Here, the distances to all four page borders, as well as the rectangle's width and height are displayed.

An alternative is the extension "Dimensions". This one measures the distances between two adjacent elements on its own. To make it do that, just place the mouse pointer between the respective elements. Two lines show you which distance is measured. It always measures the vertical and horizontal distance to adjacent elements.

Automatically Refresh a Page After Changes With "LivePage."

Refreshing a website is probably one of the most common actions. Changes to HTML, CSS, and JavaScript files are made, and they need to be tested in the browser afterward.

The extension "LivePage" takes the task of frequent manual refreshing off of you. Whenever a resource, like a CSS file, was changed on the server, the extension automatically refreshes the page.

Creating Screenshots Using "Awesome Screenshot."

Whether it's for the presentation in your portfolio or for a client: website screenshots are always necessary. "Awesome Screenshot" allows you to take screenshots with one click. Here, only the content of the current tab is included.

Additionally, you also get to decide whether you want a screenshot of the visible area in the browser, or the entire website. It is also possible to take a complete screenshot of long, scrollable pages.

(dpe)

Featured image by Growtika / Unsplash