Crash course

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.

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.

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.

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.

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.

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.

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.

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.