Crash course

Learn how to use Replay from the ground up with this short crash course. You'll start by learning how to install Replay and create your first recording. The course will guide you through using various debugging tools such as network devtools, network monitor, and how to add console logs. You'll also explore the React panel among other features. By the end of this course, you'll have mastered the basics and be ready to start debugging your own app with Replay.



This introductory lesson provides an overview of Replay, explaining how it functions and how it can significantly save you time during debugging. You'll learn about the time-traveling and how it can help you immensely when debugging your app and provide insights into your application's behavior.


Recording your first replay

This video provides a step-by-step guide on manually creating your first replay using Replay. You'll learn how to download the Replay browser, sign in to your account, and begin recording. The lesson also covers how to name your replay for easy identification and management.


Replay DevTools overview

This video guides you through the various tools and panels available in Replay DevTools. You'll learn about different views within DevTools, such as the console, elements panel, network panel, and source viewer, helping you effectively utilize these features for debugging.


Console logs overview

This lesson explores how console logs can provide crucial runtime information. You will learn about the "Jump to code" functionality, which allows you to directly link console outputs to the specific parts of your code. Additionally, you'll see how to add console.log statements to your replay to print out runtime values from your code, enhancing your debugging process.


Commenting and sharing

This video demonstrates how to enhance collaboration in Replay by adding comments to different parts of your replay and setting up sharing options. You'll learn how to share a replay with specific people or specific teams.



This lesson teaches you how to navigate the timeline feature in Replay to jump to any moment within your replay. You'll learn how to refine your view by setting focus start and focus end points, allowing you to concentrate on specific parts of your replay. Additionally, the lesson covers how to jump directly to a specific line of code or a particular execution of it, enhancing your debugging efficiency.


Network monitor

This lesson focuses on the capabilities of the network panel in Replay DevTools. You’ll learn how to view detailed information about API calls, including body, payload, response, and other data. Network panel helps you effectively analyze network interactions and troubleshoot issues related to API calls.


Elements panel

This lesson explores the capabilities of the Elements panel in Replay DevTools. You'll learn how to inspect the DOM tree and view properties of any element, including styling, event listeners, and more.


Source explorer

This lesson guides you through using the source explorer in Replay DevTools. You'll learn how to view your project's file tree and search through files or their contents efficiently. Additionally, you’ll learn how source maps work in Replay, helping you understand how your compiled code relates back to your original source code.


React panel

This lesson focuses on how to utilize Replay DevTools to examine the React component tree. You'll learn how to observe changes in properties and hooks over time. Additionally, the lesson teaches you how to navigate from the component detail panel to the specific element it has rendered or to the source code of the component itself.