Best Chrome Extensions for Front End Developers

1)Emmet Re:view

- Emmet Re:view extension helps to test the responsiveness of your website in multiple viewports.

- Emmet Re:view extension allow the developer to check your website in different number view side by side.

Features:

Emmet Re:view extension display every media query breakpoint.
You can create your device for testing the responsive of your website
PageSync engine helps to synchronize all user interaction across all viewports and it supports scrolling, form filling, dragging mouse hover, etc.

Click here to install => Emmet Re: view

Demo:

2)Page Ruler Redux

- Page ruler extension helps to measure HTML elements in web pages to get a pixel-perfect user interface.

- This extension is a very full developer who creates UI from UX design.

Features :

It's open-source software deployed in GitHub and GitLab.
You can create a ruler for measuring HTML elements for pixel-perfect design.
You can resize the ruler by arrow key and dragging.
You can adjust the color of HTML elements.

Click here to install => Page Ruler

Demo:

3)CSS Peeper

- No need to inspect styles from web pages.

- CSS Peeper helps to extract the CSS from web pages build a wonderful style guide to use the CSS.

- CSS extension read focused HTML element style properties like font-size, color, background-color, padding, margin , and more . It generates a simple structure.

Click here to install => CSS Peeper

Demo:

4)Site Palette

- Site Palette helps to get a color palette from any web page.

- The site palette fetches the colors from the web page and generates a color palette based on fetched colors.

- This extension is helpful for front-end and UI developers.

Features:

You can create a sharable link.
Preview and download the palette as an image.
Adobe swatch supported
Site Palette API is free to use.
You can fine-tune or customize your palette in the google art palette.

Click here to install => Site Palette

Demo:

5)Fonts Ninja

- Fonts Ninja extension helps to identify the fonts from any web pages or websites.

- This extension will find the font and fetch detailed information about the font like a download link, pricing details for the font, creator name, and more.

- This extension is very useful for UI and front-end developers

Click here to install => Fonts Ninja

Demo: