Replay Browser

How it works

The Replay Browser allows you to record a bug once and then inspect it afterwards without having to reproduce it again.

It works by intercepting certain low level OS library calls from the browser replaying them later in the same order. A more detailed explanation can be found here.

Use cases

Replay Browser can be used to replay UI behaviours after they happened or to examine them via the DevTools.

Recording can be helpful if you want to share the bug with others without them having to reproduce it themselves.

Once you have created a replay, you can debug code as often as you like without having to reproduce the bug.

Debugging

Due to the way it works, the Replay Browser allows debugging backwards in time.

In particular, this means that you can set a breakpoint and then see on a timeline all the times when the breakpoint was hit.

You can then jump to the breakpoints at any time and see the updated UI at that time.

Conclusion

The Replay Browser is a powerful tool when it comes to debugging bugs in the UI. It integrates nicely with frameworks like React, which makes it a must-have when investigating a difficult bug.