🔥 9 Useful Web Extensions For Developers 💎
Tags: webdev, programming, beginners
Published: 2023-12-09 13:49:32


![welcome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb466n5e9pmxbcpf3rym.gif)

---

**Hii 👋 Developers**! 

Today I wanted to share some of the useful **chrome extensions** for you, They are **really handy** and can save your time too.

These Chrome extensions are Almost free to use. 

**And if you want**  weekly tech News and stay ahead with the latest tech trends and upcoming hackathons **then join** [Devletter](https://devletter.vercel.app/). 

Dont't forget to drop 🔥💖🚀🦄 and save it ✅.

**let's begin with 👇**

---


## 1. Scribe: AI Documentation, SOPs & Screenshots 📝


![scribe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz4kyfoj3zzo8gg3gqlz.jpeg)

This extension allows you to easily create documentation for your projects using AI. You can take screenshots, record descriptions and steps directly from your browser. It's perfect for documenting processes and tutorials. 

{% cta https://chromewebstore.google.com/detail/scribe-ai-documentation-s/okfkdaglfjjjfefdcppliegebpoegaii?hl=en-GB&utm_source=ext_sidebar %}Download it✔{% endcta %}

---


## 2. FireShot - Take Webpage Screenshots 📷 

![Fireshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1od6h35dglsofeg1zglm.png)

With FireShot you can capture full screenshots of webpages or select an area to screenshot. It's very useful for documenting designs and workflows. The screenshots are saved to your computer so you can include them in documents or presentations. Check it out at: 

{% cta https://microsoftedge.microsoft.com/addons/detail/take-webpage-screenshots-/fcbmiimfkmkkkffjlopcpdlgclncnknm %}Download it✔{% endcta %}

--
## 3. Lighthouse - Website Performance 🚀


![Lighthouse ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr5x30do3ti0rbw6sa26.png)

Lighthouse analyzes websites and apps to help improve performance, quality and correctness. It runs audits and generates reports on how to fix issues. This is a must have for any developer to ensure their sites are optimized. Get it from: 

{% cta https://chromewebstore.google.com/detail/blipmdconlkpinefehnmjammfjpmpbjk %}Download it✔{% endcta %}

---


## 4. Dark Mode - Dark Reader 🖤


![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkj9sqb1uk6divjvea60.png)

This extension lets you enable dark mode on any website. It's easier on the eyes especially at night. As a developer, you'll appreciate being able to quickly switch themes while working. Check it out here: 

{% cta https://chromewebstore.google.com/detail/dark-mode-dark-reader-for/pjbgfifennfhnbkhoidkdchbflppjncb %}Download it✔{% endcta %}

---


## 5. CSS Peeper - Inspect Styles 👓

![CSS Peeper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80var5ou81vctuorpusu.png)

See the CSS styles used on websites without digging through code. CSS Peeper extracts stylesheets so you can browse them beautifully. Handy for designers and developers to discover new techniques. Grab it from: 

{% cta https://chromewebstore.google.com/detail/mbnbehikldjhnfehhnaidhjhoofhpehk %}Download it✔{% endcta %}

---


## 6. JSON Formatter - Beautify JSON 📝


![JSON Formatter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69l5cfpwextcxfh6l9km.png)

Formatting JSON makes it so much more readable. This extension auto-formats JSON on page load. Very useful when working with APIs or configuration files. Get organized with JSON Formatter: 

{% cta https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa %}Download it✔{% endcta %}

---

## 7. What Font - Identify Fonts 🎨


![What Font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mhtzbm87m6vx6a4ldzk.png)

Figure out fonts with a single click using What Font. Perfect for replicating designs or finding new typefaces. Just hover over text and it shows the font details. Super simple way to discover fonts on websites. 

{% cta https://chromewebstore.google.com/detail/opogloaldjiplhogobhmghlgnlciebin %}Download it✔{% endcta %}

---

## 8. Octotree - GitHub Code Tree 🎋


![Octotree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2em5dzybqoto5wdpmla1.png)

See GitHub repos in an interactive tree view with Octotree. Quickly navigate files, preview code and more right from the sidebar. A must have for any developer working with Git. Check it out at: 

{% cta https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc %}Download it✔{% endcta %}

---

## 9. Grepper - Code Search Engine 🔍


![Grepper ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad0qyb9n6nic4axe4guq.png)
  
Grepper lets you search code snippets from all around the web. Handy for finding solutions without leaving your browser. As a student developer, this will help solve many coding problems fast. Grab it here: 

{% cta https://chromewebstore.google.com/detail/amaaokahonnfjjemodnpmeenfpnnbkco %}Download it✔{% endcta %}

---

## And That's it 🙋‍♂️

Thank you for reading until **now** and don't forget to **comment** your favoriate one.

**And dont't forget to drop** 🔥💖🚀🦄.

**See you next week🤝**

**Happy Coding**

{% embed https://dev.to/random_ti %}

[![github](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/taqui-786) 

[![twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Taquiimam14)

[![portfolio](https://img.shields.io/badge/Portfolio-255E63?style=for-the-badge&logo=About.me&logoColor=white)](https://mdtaquiimam.vercel.app)

[![buymeacoffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/taquiDevloper)