# Angular DevTools for Chrome/Edge

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1736272657916/3167a0cb-ddae-4a14-a3d9-d4320d948f8f.png align="center")](https://www.angularacademy.ca/angular-certification)

Did you know that we have a dedicated **browser dev extension for Angular**?

**Angular DevTools** lives inside **Chrome/Edge DevTools** and provide Angular specific **debugging and profiling capabilities**.

\=> [installation link](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) (for Chrome or Edge)

Note: we previously had the **Augury** extension (and even before that **Batarang** if you can remember…), but it was not maintained anymore since Angular 9.

This new Angular DevTools extension will work with any app using **Angular v9+**. Also, it will not work with app compiled in production mode.

## Inspect your components tree and properties

You can use Angular DevTools to understand the structure of your application and preview the state of the directive and the component instances. You can even modify values and see changes in real time!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701616479673/0d4776e2-6987-4963-8c81-92564e319409.png align="center")

---

**👉 Test your Angular skills, become** [**Certified Angular Developer**](https://www.angularacademy.ca/angular-certification)**! 🏆🏅**

---

## Profile your app and inspect change detection cycles!

You can use the profiler tab to get insights into the execution of the application, which shows you the individual change detection cycles, what triggered them, and how much time Angular spent in them.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701616502385/86261720-e165-4b60-85cb-382599865c8d.png align="center")

**That’s definitely a great tool to have and a nice addition to the Angular dev ecosystem!**