 Let's look into some advanced features to edit, debug, and export your recordings from the Recorder panel. To learn the basics, please watch my previous video on google.gear-dev2-recorder. There are two ways to debug your user flows. You can slow down the replay or set the breakpoint to execute step by step. Expand the replay button drop-down. There are four speed options. Try to replay it very slowly and observe the differences. You can cancel the replay anytime if you feel it's too slow. Apart from that, you can click on the blue dot next to each step to set breakpoints. Start replay, the recorder will pause at the first breakpoint. Click on the continue button to resume the execution until the next breakpoint. Alternatively, click on this button to execute one step at a time. When you pause at the breakpoint, you can perform action on the page or switch to another panel for further inspection or manipulation. The recorder supports different types of events. Some are auto-detected during the recording, some are not. You need to edit manually. For example, you have a user flow to add a coffee, hover over the checkout button and add one more. Notice that the hover event is not captured. It will fail if you replay again. You need to edit manually once you finish the recording. Click on the three dot menu, add a step before and change the type. Here, you can see a list of all supported events. Select hover, you can manually edit the selector or use the selector picker to update it. Replay again and yay, it's successful. There are different options for you to configure the step depending on the type. For example, expand the click step. You can add a button property then set it to secondary to make it a right click action. You can also add a device type. The device type supports mouse, pen or touch. Learn about more configuration in our documentation. The recorder currently supports two basic assertions. You can add a step to wait for element or use wait for expression. For example, you want to check if there are two coffees on the checkout list. Add a step to wait for element, use the selector picker to pick on the element. In this case, we need to edit the selector manually. After that, add the operator and count. In our case, we want to set it to equal equal and two. Replay it and yes, it's successful. If you set the count to three, the replay will fail. If you want to assert the total price on screen, you can use the wait for expression to do so. Add a step to wait for expression. Type in your expression with JavaScript. In this case, we want to assert that the inner text of the button is equal to $29. We are aware of the syntax is slightly lengthy. Tell us what improvements you would like to see here using the feedback link. Next, let's talk about the different export options and what you can do with them. When you export your user flow in JSON, not only can you share with friends and re-import it back to the recorder, you can also use some NPM rivalries to replay it. For example, save the JSON to a Node.js project and install Puppeteer Replay and Puppeteer. After that, you can replay one or more JSON files with this command. With this command, you can then schedule it to run as part of your CI-CD workflow. I have a code example here to show you how to do it. There are other third-party libraries that support replay programmatically as well. For example, TestCafe and SourceLabs. Make sure you check out the full list in our documentation. Now, you might be wondering what the export as Puppeteer script options is for. It is similar to the JSON option, except the user flow now is exported as a JavaScript object. This export option allows you to customize your workflow execution instantly. For example, if you want to save a screenshot after every step, you can modify this file to implement the runner extension. When you execute the user flow, the screenshots are saved. Go to this link to learn more about customizing the user flow and code them all. The last export option here is export as Puppeteer script. We only recommend this option if you are familiar with Puppeteer and want to have full control and significant customization of the code. Well, I like. That's not all. You can install extensions to export the user flows into other formats. In the Chrome Web Store, install an extension. Then, open the new browser tab with DevTools. Open the user flow in the recorder panel, click on the export button. You should see the new option here. You can export the user flow as a web page test custom script for performance analysis or convert it to different test scripts like Cypress, WebDriver.io, NightWash, Testing Library, and more. Go to this link for the full list of extensions and how to use them. We also include a troubleshooting guide in case you have issues launching the extension. Some of these extensions also publish a NPM library to let you convert the user flows programmatically. This makes it easier for you to convert multiple user flows at once. In case you want to create your own library or extension, we have a guide here as well. The recorder panel, extensions, and libraries are still new. So remember to give us feedback or report any issues you find. You can also tweet at us to show us some support. That's all. See you for the next DevTools Tips.