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
Debugging Examples
Debugging JavaScript
Debug an element resize issue in Excalidraw.
Debugging React useEffect
Debug a React useEffect issue in Replay.
Debugging Redux
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
Reviewing changes made by another developer in the HasReplay.io app to understand the new code.
Understanding Applications
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)
Practice Debugging
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!