Dev Tools Unleashed: 7 things you probably didn't know Dev Tools could do
Tags: webdev, javascript, css, html
Published: 2022-06-19 06:09:19

The **Chromium Dev Tools** provides a powerful toolset for **debugging** and **testing web apps**, but most people are content with using it to check out only the **elements** and **styling**.

This article will open your eyes to the true power of the **Dev Tools** and how to use them to your advantage!

## 1. CSS Grid & Flexbox Visual Editor 🔎

Configuring **Flexbox** and **CSS Grid** can be complicated, especially for beginners. Luckily, the **Chromium Dev Tools** have a built-in **visual editor** makes the process a walk in the park!

Simply click the icon next to `display: flex` or `display: grid` in the **Dev Tools** and the **visual editor** pop open.

![flex-editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wd7e5zd8m9mgqoijdzs.png)

## 2. Box Shadow Editor 👥

To add **box-shadow** that looks great, in case they don't have a design ready, developers often rely on trial and error, which includes changing the values and reloading the site hundreds of times!

The **Box Shadow Editor** allows you to modify the shadow visually and see the updates on your site **real-time**!

![box-shadow-editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cas72fha1jydkb7qzbe8.png)

## 3. Layer Inspector 🍰

The **Layer Inspector** provides a **3D view** of the **layers** in your site, which helps you **debug** why certain elements are not properly visible on the website!

![layer-inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwusqz4hdnlouo2qx1o2.png)

In case you cannot find the **Layer Inspector**, click the **three dots on the top right** > Select **More Tools** > **Layers**.

## 4. Animation Inspector 😉

Ever seen an incredible **animation** on some website, but couldn't wrap your head around how it was made? Using the **Animation Inspector**, now you can easily check out the changes being made and even modify their **timelines**!

![animation-inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc7phy1r3sn52t1k4pgz.png)

In case you cannot see the **Animation Inspector**, you can open it up by selecting **Animations** under **More Tools**.

## 5. Check Code Coverage 🔎

Wondering why your website takes ages to load up? The **Code Coverage** tool will tell you exactly what percentage of your code is actually being used, enabling you to get rid of **unused code** and **improve your site's performance**!

![coverage-inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52fyn3vimut6vk0m8w62.png)

In case you cannot see the **Coverage Inspector**, you can open it up by selecting **Coverage** under **More Tools**.

## 6. Throttle Network Speed ⏱️

Want to deliver outstanding performance to devices with slow connections too? You can test out the experience by **throttling** the network speed.

The option to **throttle** are available under the **Network tab** in the **Dev Tools**.

![throttle-network](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7iz6vxr241sdz48yu21.png)

## 7. Color Picker 🎨

Just like the **Box Shadow Editor**, the **Color Picker** allows you to modify the color of an element visually and see the updates on your site **real-time**!

To get started, click on the color icon on the left of the color value under the **styles tab**.

![color-picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9iu773z18zl8181emic.png)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to recently.

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.