8 Google extensions for coding in 2024
Tags: google, extensions, code, webdev
Published: 2024-03-13 16:48:21


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fco6837sydxkb0y4vk17.jpg)Discover a new level of coding convenience! 🔍
These 8 Google browser extensions are tailor-made for front-end developers, simplifying tasks like media query adjustments, CSS inspection, and font and color identification. Boost your workflow and bid farewell to manual tweaks with these handy tools! 👌 👨‍💻 👨‍💻

**1. Responsive Viewer:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbvy2mcddo7j6fnxsk8x.png)

This tool is invaluable for fine-tuning media queries. It helps display your website across all screen sizes seamlessly. It opens phone, tablet, and computer screens in the same Google Chrome tab, allowing you to work without the tedious manual browser adjustments.

[[Download Link](https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb)]

**2. CSS Peeper:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91e8a547856wab2evsh6.png)

This tool is exceptionally cool. Simply visit the desired website and activate the tool in your browser. It provides all images, colors, code, spaces, and numbers used on the website. Additionally, clicking on any text reveals its font size, name, and color, making it incredibly useful.

[[Download Link](https://chromewebstore.google.com/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk)]

**3. What Font:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvj05burdd9qzg932nzu.jpg)

This tool identifies the fonts used on webpages.

[[Download Link](https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)]

**4. ColorZilla:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y454ow4da136k0qtgu6y.png)
Easily identify all the colors on a webpage.

[[Download Link](https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)]

**5. Wappalyzer:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jig68q07kw36rwihpc0w.jpg)
This tool shows all the frameworks used to build a website, such as React, Angular, or Bootstrap, upon visiting. It also identifies if the website is built with WordPress, providing extensive information about the site.

[[Download Link](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg)]

**6. React Developer Tools:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mz9quuh2pdaus2vnrup.png)

Essential for front-end developers with knowledge of React.

[[Download Link](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)]

**7. Guidde:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr6cjo94w4u4ng1sbl8w.jpg)

This tool eliminates the need to search for screen recording programs. It enables easy screen recording and editing.

[[Download Link](https://www.guidde.com/?utm_source=twitter&utm_campaign=alfaiz)]

**8. Gimli Tailwind:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zai4vrp3qyb66p51gzqx.jpg)

Tailwind users will find this tool helpful for easy and comfortable website adjustments.

[[Download Link](https://chromewebstore.google.com/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl)]

So, if you found this post helpful, give it a like and share it with your pals. 🥰🥰

Thank you for reading!

P.S:
You can follow me:
[LinkedIn](https://www.linkedin.com/in/omarwaleedzenhom/)

[Facebook](https://www.facebook.com/OmarZenho)

My Portfolio:
[Omar-Zenhom](https://omarzen.github.io/Omar-Zenhom/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z37fk7tcsri2scoydqv0.jpg)