Debugging gets easier the more bugs you see. These examples feature real-world issues, as well as opportunities to hone your own debugging skills. Share your replays with us and we’ll add it to this page!
If you’re brand new to Replay, this 3-minute video gives a quick overview, then check out the Getting Started Guide.
How to Debug
- Webinar Video: Debugging your Debugging Process by Cecelia Martinez (slides)
- Webinar Video: Debugging React Applications by Cecelia Martinez (slides)
- Blog: Debugging CSS
Debug an element resize issue in Excalidraw.
Debugging React useEffect
Debug a React useEffect issue in Replay.
Debug a Redux dispatch issue in Replay.
Other Debugging Examples
- Replay: Debugging GrubHug (Video)
- Video: Debugging a bug in GitHub
Exploring with Replay
Use Replay to explore applications, whether you’re getting up to speed with a new project, reviewing changes, or just curious how something works.
Reviewing changes made by another developer in the HasReplay.io app to understand the new code.
Record any web or Node app with Replay to see what’s happening under the hood.
- Replay: How Wordle handles redirects (Twitter thread)
- Replay: How PDF.js search works (Video)
Replayable.dev features GitHub issues with attached replays.
- Closed Issues are great examples of how replays were used to solve real-world bugs.
- Open Issues are great for diving into replays and debugging yourself.
The site also has a “buggy” mode that can be enabled by clicking the ✅ icon in the lower right corner. Record the site or use the replay here to practice debugging these issues!