The Chrome Dev Tool you are missing : FEAT Recorder
Tags: javascript, webdev, programming, productivity
Published: 2022-07-31 17:00:00

There ever been the time where you would repeatedly testing something manually when you are developing?

For example Form Validations , Filling up the forms and user flows. 

**Who is this blog for ?**
This is meant for developers who are willing to go extra mile for testing their flow with automation. (This feature is still experimental)

**Example**
Lets assume this wierdly layed out form where the **_Next_** button is disabled until all the details are filled. We're working on the 2nd step where we would want to click next and test something.

Imagine going over 20 times manually filling this up! That is where chrome recorder comes in 😇

![User Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcvzj0rrh7frw7s6vhio.png)

This is what recorder does. For the very first time I train the recorder do what I am doing and from next time onwards we can just let the recorder take control doing that.

![Chrome Recorder Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iq1hu4i5ozdg2wk6in2x.gif)

Lets see how we can do this 
1. Open your console / Developer tools 
2. Press **CMD/CTRL + SHIFT + P** to open command run 
3. Type **Recorder** and click **Show Recorder**
4. Click **Start new recording** and do the flow. Thats it


![Show Recorder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id89vydq6lafi0dah81a.png)

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2kz5gcul09xq0uui6iw.gif)
 
There are lot of options after you have done recording.

You can export as json and share.
![Export](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gi87mdbpsfkg68l8rq7.png)

All the events can be edited such as value changes and other stuff. You can also **add timeouts** to make way for api calls.
![Event Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5dvabqkxs6utdxob89o.png)

For more information visit [Record, replay, and measure user flows](https://developer.chrome.com/docs/devtools/recorder/)

I have tested this feature in Angular 11 and Nextjs. Its safe to say I've saved time ( lot of boring stuff ) at my company when testing flows.
 
_Peace_ 🕊

--- 

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.

You can make me drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

## More Free Articles From me 
{% embed https://dev.to/shrihari/51-100-510-why-you-have-to-be-careful-with-doubles-and-floats--29eg %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}