The Must-Have Google Chrome Extensions for Front-End Web Engineer

Front-End Web Engineer use a variety of tools and technologies to build and maintain websites and web applications. One of the most popular tools is Google Chrome, which offers a wide range of extensions that can help engineers to be more productive and efficient.

We will look at some of the must-have Google Chrome extensions for Front-End Web Engineer. These extensions can help you with everything from debugging, inspecting and saving your life.

1. Dimensions

This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn't really work with images because there the colors change a lot pixel to pixel.

2. Page Ruler

Measure page elements size in pixel with an easy-to-use ruler. Page Ruler is an extension that lets you measure distances (in pixels) on a webpage. It draws a rectangular ruler when you move your mouse on the page. The ruler has width, height, start and end all labeled with corresponding metrics in pixels. When you move your mouse, the rectangle changes its size and all the numerics are updated.

To activate the addon please press the toolbar button once. Likewise, to disable the addon please press the toolbar button again. This addon works with mouse clicks in desktop machines. For touch-enabled devices, you can work with touch to draw the rectangle within the page.

3. WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It’s that simple and elegant.

4. ColorPick Eyedropper

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more. Keep in mind that your display's color space matters - if it or chrome is not set to sRGB (and restarted chrome) then some colors set to one value will pick as a different value (as if from a screenshot, which in some cases can have a similar effect).

Conclusion

Google Chrome extensions can be a great way to boost your productivity and efficiency as a front-end web developer. There are many different extensions available, so be sure to explore the Chrome Web Store to find extensions that meet your specific needs.