Replay Browser

Funktionsweise

Der Replay Browser ermöglicht dir einen Bug ein einziges mal aufzuzeichnen und dann im Nachhinein zu inspizieren, ohne ihn ein weiteres mal reproduzieren zu müssen.

Er funktioniert indem er auf einer tieferen Ebene bestimmte OS library calls vom Browser abfängt und später in der gleichen Reihenfolge abspielt. Eine genauere Erklärung ist hier zu finden.

Anwendungsfälle

Der Replay Browser kann verwendet werden, um UI Effekte im Nachhinein zu sehen oder über die DevTools zu untersuchen.

Das Aufzeichnen kann hilfreich sein, wenn man den Bug mit anderen Teilen möchte, ohne dass sie ihn selbst reproduzieren müssen.

Hat man erstmal ein Replay erstellt, kann man Code beliebig oft debuggen, ohne den Bug reproduzieren zu müssen.

Debugging

Durch seine Funktionsweise ermöglicht der Replay Browser ein Debugging vor und zurück in der Zeit.

Das heißt insbesondere, dass man einen Breakpoint setzen kann und dann auf einer Zeitachse alle Zeiten sieht, wo dieser erreicht wurde.

Danach kann man nach Belieben zu den Breakpoints springen und das UI zu dieser Zeit sehen.

Fazit

Der Replay Browser ist ein mächtiges Tool, wenn es um Debugging von Bugs im UI geht. Es integriert sehr schön mit Frameworks wie React, was es zu einem must-have macht, wenn man mal einen schwierigen Bug untersucht.