Chrome new feature-record small video

Chrome 97 introduced a preview function-Recorder. It allows you to record web page operations and supports playback, editing, performance measurement and many other functions.

What does it look like

You can directly see a Recorder panel in chrome devtool, click on it to experience it.

If you don't find it, you can try cmd + shift + p to bring up the command panel and search for Recorder. Of course, if the feature is not released, it will not be searchable

what's it for?

Through it, you can achieve some interesting functions.

for example:

• The test students record a "video" and send it to the developer, who will locate the problem based on this video.
• Test the performance of a certain business process under various network and hardware environments, and you can even see its performance on different platforms (such as PC, mobile phone, tablet, etc.).

• automated test. You can record a video, and then automatically generate many test cases by modifying some of the parameters.

• 。。。

Since it is a preview version, it may not be certain what it will eventually be.

Big move

For me, I want a more interesting feature.

We know that Chrome’s devtool frontend (the developer tool you see) is open source, and the code is hosted on Github: https://github.com/ChromeDevTools/devtools-frontend

So you can integrate it directly into your project. For example, you can develop a debugging tool. This tool forks the devtool frontend, and then modifies the source code of the Recoreder part so that users can manually report their own recordings, and then you send the user's recording data, network data and other data to your backend Perform analysis.

I have done this function in my previous company, but I didn't do it well. And if you rely on the Chrome team, you don’t need to solve those tricky problems, such as performance problems.

If your company has a need for user error reporting or information collection, consider whether it can be used for you.

More introduction: https://developer.chrome.com/docs/devtools/recorder/